jquery手风琴 - 记住从外部链接点击返回活动区域

Question

我有一个页面上的jQuery手风琴内部的链接。当访问者点击其中一个链接时，点击后退按钮返回到我的页面，我希望包含链接的手风琴是开放的。

我的假设是，我应该使用导航：真正的设置，并将标签添加到不同的手风琴，但这不适合我。

以下是我有：

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

手风琴作品就好而我在页面中。如果我点击其中一个外部链接，然后点击后退按钮，所有手风琴都会折叠。我认为让人们不得不打开他们以前的手风琴来点击下一个链接 - 或者阅读更多有关该领域的内容，这就是为什么我要改变这种风格的刺激经历。

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

Answer 1

下面是一个使用烧烤插件距离Ben Alman 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>