jQuery手风琴-从外部链接单击时记住活动区域 [英] jquery accordion - remember active area when clicking back from an external link

问题描述

我在页面上的jQuery手风琴内部有链接.当访问者单击这些链接之一，然后单击后退"按钮返回到我的页面时，我希望包含该链接的手风琴处于打开状态.

I have links that are inside a jquery accordion on a page. When a visitor clicks on one of those links then hits the back button to return to my page, I'd like the accordion that contained the link to be open.

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

My assumption was that I should use the navigation:true setting and add hashtags to the different accordions, but that isn't working for me.

这就是我所拥有的:

// 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引用下面//

// At the bottom of the page below the jquery and jquery ui references //

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

当我在页面中时，手风琴工作正常.如果单击外部链接之一，然后单击后退"按钮，则所有手风琴都会折叠.我认为对于人们来说，不得不打开以前使用的手风琴以单击下一个链接将是一种令人不快的体验-或阅读有关该领域的更多信息，这就是我试图做出这一改变的原因.

The accordion works just fine while I'm in the page. If I click one of the external links and then click the back button, all the accordions are collapsed. I think it will be a irritating experience for people to have to open the accordion they were previously on to click the next link - or read more about that area, which is why I'm trying to make this change.

我是否使用导航选项沿着正确的道路前进?

Am I headed down the right road using the navigation option?

推荐答案

以下是我使用Ben Alman的BBQ插件创建的一个解决方案

Here's a solution I created using the BBQ plugin from 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应该相对相同:

and the HTML should be relatively the same:

<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手风琴-从外部链接单击时记住活动区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！