Question

我已经编写了一些代码来为我的网站创建一个手风琴。我的问题是，我希望用户能够与其他人共享（复制粘贴）网址，以使他们看到与他们共享网页时打开的同一个手风琴项目。现在，我的代码可以工作，但如果页面太长，它会跳转到手风琴项目的位置。这会产生一种我希望避免的丑陋效果。理想情况下，我会操纵URL而无需点击链接。

这是我现在拥有的： http://codepen.io/anon/pen/vHlJa

HTML：

<ul id="accordion">
  <li id="1"><a href="#1">Title 1</a>
    <div>Lorem ipsum dolor sit amet. </div>
  </li>
  <li id="2"><a href="#2">Title 2</a>
    <div>Lorem ipsum dolor sit amet. </div>
  </li>
   <li id="3"><a href="#2">Title 3</a>
    <div>Lorem ipsum dolor sit amet. </div>
  </li>
</ul>

jQuery的：

$('#accordion>li').find('div').hide();

if(window.location.hash) {
   var hash = window.location.hash;
} else {
   var hash = '#1'; 
} 
$('#accordion ' + hash).addClass('open').find('div').show();

$('#accordion>li').on('click',function(){
   $('.open div').slideUp().removeClass('open');   
   $(this).addClass('open').children('div').slideDown().end()   
   .siblings().removeClass('open');
});

我创建了一个codepen来显示我的意思： http://codepen.io/anon/pen/vHlJa

Answer 1

您可以使用return false来阻止链接的默认操作（滚动到锚点）。

所以你必须动态地改变哈希：

window.location.hash = '#' + $(this).attr('id');

您可能还想使用平滑滚动来阻止“跳转”到位置，但仍然滚动到用户的右侧幻灯片：您可以在$('html,body').animate({scrollTop: ...});动画结束后使用slideDown() ，如下：

.slideDown(function(){
    $('html,body').animate({
        scrollTop: $(this).parent().offset().top
    }, 500);
})

这是一个带有修改示例的jsbin :(我使用了JSBin，因为我遇到了codepen中的哈希问题）：

http://jsbin.com/wahes/1#1

http://jsbin.com/wahes/1#2

http://jsbin.com/wahes/1#3

创造一个节省国家的手风琴

1 个答案: