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>