jquery-ui - jquery Accordion - 从外部链接单击返回时记住事件区域

Question

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

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

这是我所拥有的:

// 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>

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

我使用导航选项走的路正确吗？

Answer 1

这是我使用 Ben Alman 的 BBQ 插件创建的解决方案 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>