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

Question

我有以下导航，使用下面的jquery accordion代码。当前，每个#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加载的，还是菜单只是显示内容？如果是这样的话，听起来像是里面的锚点标记被挂接到了你的accordion的click事件上。

我注意到有一个选项："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);
        });
     }
}

因此，请尝试在函数顶部(或在初始化accordion时)将其设置为"true“。

Answer 2

如果你想根据“当前页面”自动展开导航菜单，你可以使用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');
    }