jquery Accordion - 从外部链接单击返回时记住活动区域

我的链接位于页面上的 jquery 手风琴内部。当访问者单击其中一个链接然后单击后退按钮返回我的页面时，我希望打开包含该链接的手风琴。

我的假设是我应该使用 navigation:true 设置并将主题标签添加到不同的手风琴，但这对我不起作用。

这是我所拥有的：

// lots of content above here // 

<div id="accordion">

<h5><a href="#area1">Area 1 header</a></h5>
<div>
    <ul>
        <li><a href='http://www.externalsite.com'>Link to an external site</li>
    </ul>
</div>

<h5><a href="#area2">Area 2 header</a></h5>
<div>
    <ul>
        <li><a href='http://www.anotherexternalsite.com'>Link to another external site</li>
    </ul>
</div>

// 在页面底部 jquery 和 jquery ui 引用下方 //

<script type="text/javascript">
    $(document).ready(function(){
       $("#accordion").accordion({active:false,collapsible:true,autoHeight:false,navigation:true});
    });
</script>

当我在页面中时，手风琴工作得很好。如果我单击外部链接之一，然后单击后退按钮，所有手风琴都会折叠。我认为，对于人们来说，必须打开他们之前打开的手风琴才能单击下一个链接，或者阅读有关该区域的更多信息，这将是一种令人恼火的体验，这就是我尝试做出此更改的原因。

我是否使用导航选项走在正确的道路上？

这是我使用 Ben Alman 的 BBQ 插件创建的解决方案http://benalman.com/projects/jquery-bbq-plugin/ http://benalman.com/projects/jquery-bbq-plugin/

<script>$(function(){
$('#accordion').accordion({ collapsible: true, autoHeight: false, navigation: true });

var accordion = $('.ui-accordion');    
acc_a_selector = '.ui-accordion-header a ';  
accordion.accordion({ event: 'change'});    
accordion.find( acc_a_selector ).click(function(){
    var state = {},
    id = $(this).closest( '.ui-accordion' ).attr( 'id' ),
    idx = $(this).parent().parent().length;
    ndx = $(this).parent().index() * 0.5;
    state[ id ] = ndx;
    hashlink = $(this).attr('href');
    $.bbq.pushState( state );
});

$(window).bind( 'hashchange', function(e) { 
    accordion.each(function(){
        var idx = $.bbq.getState( this.id, true ) || 0;
        accordion.children('h3').eq(idx).filter(':not(.ui-state-active)').parent().accordion( "option", "active", idx);
    });
})

$(window).trigger( 'hashchange' );});</script>

HTML 应该是相对相同的：

<div id="accordion">
<h3><a href="#">Area 1 header</a></h3>
<div>
    <ul>
        <li><a href='http://www.externalsite.com'>Link to an external site</a></li>
    </ul>
</div>
<h3><a href="#">Area 2 header</a></h3>
<div>
    <ul>
        <li><a href='http://www.anotherexternalsite.com'>Link to another external site</a></li>
    </ul>
</div></div>