jQuery Accordion在子页面上保持菜单在页面之间打开

Question

我有以下导航，使用下面的jquery手风琴代码。目前，每个#top-level导航项都设置为切换打开和关闭<div class="slide">以显示子项。我想修改代码，以便当用户登陆其中任何一个孩子时<div class="slide">保持打开状态。

屏幕截图供您参考：

非常感谢任何帮助。提前谢谢。

<ul class="nav">
    <li id="top-level" class="has-drop"><a class="opener" href="/index.php/visitor-information/"><em>Visitor Information</em></a>
        <div class="slide">
            <ul>
                <li><a href="/index.php/visitor-information/visitor-information/">Visitor Information</a></li>
                <li><a href="/index.php/visitor-information/about-our town/">About our town</a></li>
                <li><a href="/index.php/visitor-information/gallery/">Gallery</a></li>
                <li><a href="/index.php/visitor-information/im-hungry/">I'm Hungry</a></li>
            </ul>
        </div>
    </li>
    <li id="top-level" class="has-drop"><a class="opener" href="/index.php/membership/"><em>Membership</em></a>
        <div class="slide">
            <ul>
                <li><a href="/index.php/membership/membership/">Membership</a></li>
                <li><a href="/index.php/membership/advocacy/">Advocacy</a></li>
                <li><a href="/index.php/membership/ambassadors/">Ambassadors</a></li>
                <li><a href="/index.php/membership/board-of-directors/">Board Of Directors</a></li>
            </ul>
        </div>
    </li>
    <li id="top-level" class=""><a class="opener" href="/index.php/upcoming-events/"><em>Upcoming Events</em></a></li>
    <li id="top-level" class="has-drop"><a class="opener" href="/index.php/online-store/"><em>Online Store</em></a>
        <div class="slide">
            <ul>
                <li><a href="/index.php/online-store/online-store/">Online Store</a></li>
                <li><a href="/index.php/online-store/business-compliance-materials/">Business Compliance Materials</a></li>
                <li><a href="/index.php/online-store/events/">Events</a></li>
                <li><a href="/index.php/online-store/membership-products/">Membership Products</a></li>
            </ul>
        </div>
    </li>
    <li id="top-level" class=""><a class="opener" href="/index.php/contact-us/"><em>Contact us</em></a></li>
</ul>

jQuery Accordian插件代码：

/*
 * jQuery Accordion plugin
 */
;(function($){
    $.fn.slideAccordion = function(opt){
        // default options
        var options = $.extend({
            addClassBeforeAnimation: false,
            allowClickWhenExpanded: false,
            activeClass:'active',
            opener:'.opener',
            slider:'.slide',
            animSpeed: 300,
            collapsible:true,
            event:'click'
        },opt);

        return this.each(function(){
            // options
            var accordion = $(this);
            var items = accordion.find(':has('+options.slider+')');

            items.each(function(){
                var item = $(this);
                var opener = item.find(options.opener);
                var slider = item.find(options.slider);
                opener.bind(options.event, function(e){
                    if(!slider.is(':animated')) {
                        if(item.hasClass(options.activeClass)) {
                            if(options.allowClickWhenExpanded) {
                                return;
                            } else if(options.collapsible) {
                                slider.slideUp(options.animSpeed, function(){
                                    hideSlide(slider);
                                    item.removeClass(options.activeClass);
                                });
                            }
                        } else {
                            // show active
                            var levelItems = item.siblings('.'+options.activeClass);
                            var sliderElements = levelItems.find(options.slider);
                            item.addClass(options.activeClass);
                            showSlide(slider).hide().slideDown(options.animSpeed);

                            // collapse others
                            sliderElements.slideUp(options.animSpeed, function(){
                                levelItems.removeClass(options.activeClass);
                                hideSlide(sliderElements);
                            });
                        }
                    }
                    e.preventDefault();
                });
                if(item.hasClass(options.activeClass)) showSlide(slider); else hideSlide(slider);
            });
        });
    };

    // accordion slide visibility
    var showSlide = function(slide) {
        return slide.css({position:'', top: '', left: '', width: '' });
    };
    var hideSlide = function(slide) {
        return slide.show().css({position:'absolute', top: -9999, left: -9999, width: slide.width() });
    };
}(jQuery));

Answer 1

孩子是通过AJAX加载还是菜单只是显示内容？如果是这样，听起来里面的锚标签与手风琴的点击事件相关联。

我注意到有一个选项：“allowClickWhenExpanded”，这似乎是为了防止幻灯片在点击时隐藏：

if(item.hasClass(options.activeClass)) {
     if(options.allowClickWhenExpanded) {
        return;
     } else if(options.collapsible) {
            slider.slideUp(options.animSpeed, function(){
            hideSlide(slider);
            item.removeClass(options.activeClass);
        });
     }
}

所以尝试在函数顶部启用“true”（或初始化手风琴时）。

Answer 2

如果您希望根据＆＃34;当前页面＆＃34;自动展开导航菜单，您可以使用jQuery：

    if ($('.nav').length > 0)
    {
        var currentUrl = window.location.pathname;
        var navLink = $('.nav').find("a[href='/" + currentUrl + "']"); // find current page in navigation

        // find parent
        var parentLink = navLink.parentsUntil('.has-drop').find('.opener');

        // trigger click on accordion, effectively expanding it (assuming menu always starts collapsed)
        parentLink.trigger('click');
    }