jquery - 创建拯救国家的 Accordion

Question

我已经编写了一些代码来为我的网站创建一个 Accordion 。我的问题是，我希望用户能够与其他人共享(复制粘贴)URL，以使他们看到与与他们共享的人打开的相同的 Accordion 项目。现在，我的代码可以工作，但是如果页面太长，它会跳转到 Accordion 项目的位置。这会产生我希望避免的丑陋效果。理想情况下，我无需单击链接即可操作 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');
});

我创建了一个代码笔来展示我的意思: http://codepen.io/anon/pen/vHlJa

Answer 1

您可以使用return false来阻止链接的默认操作(滚动到 anchor )。

所以你必须动态更改哈希值:

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