Question

我在页面上的jquery手风琴中有链接。当访问者点击其中一个链接然后点击后退按钮返回我的页面时，我希望手风琴包含要打开的链接。

我的假设是我应该使用导航：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>

当我在页面中时，手风琴的效果很好。如果我单击其中一个外部链接然后单击后退按钮，则所有手风琴都会折叠。我认为人们必须打开他们之前使用过的手风琴点击下一个链接 - 或者阅读更多关于该区域的信息，这将是一个令人恼火的经历，这就是我试图做出这一改变的原因。

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

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>

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

1 个答案: