Jquery Accordion 菜单 - 保持所选菜单打开答案

【问题标题】：Jquery Accordion Menu - Keep Selected Menu OpenJquery Accordion 菜单 - 保持所选菜单打开
【发布时间】：2013-04-23 16:12:09
【问题描述】：

我正在尝试为我正在开发的网站创建一个垂直的手风琴菜单。这是我第一次用 jquery 做任何事情。我已经能够以我想要的方式获得一个工作菜单，除了几件事。

1) 我需要一个菜单，该菜单会根据加载的页面保持扩展，如果您单击第二个菜单内的项目，则在重新加载页面时需要扩展第二个菜单。当您从菜单中单击并加载新页面时，菜单不会保持展开状态。页面重新加载后，它会完全折叠，直到您单击标题以再次展开它。我已经在网上搜索了几天，找不到可以用来解决这个问题的任何东西。我已经研究过使用 jquery cookie 插件，只是检查当前加载了哪个页面并使用它来确定需要扩展哪个菜单，但我无法让它们中的任何一个工作。

2) 我的菜单仅在单击时展开，再次单击时不会折叠。是否可以通过再次单击来折叠刚刚展开的同一个菜单？

这是我创建的 js 文件：

function initMenu() {
    $('#menu ul').hide();
    $('#menu li a').click(function () {
        var checkElement = $(this).next();
        if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            $(this).siblings().removeClass("selected");
            return false;
        }
        if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#menu ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
            if (!$(this).hasClass("selected")) {
                // Remove the class from anything that is active
                $("a.selected").removeClass("selected");
                // And make this active
                $(this).addClass("selected");
            }
            return false;
        }
    });
}
$(document).ready(function () {
    initMenu();
});

这是一个完整的 html 和 css 的 jsfiddle：http://jsfiddle.net/CShsY/

谢谢。

【问题讨论】：

也许检查一个已经为您构建了这些选项的插件。 webcloud.se/jQuery-Collapse

标签： jquery html menu accordion

【解决方案1】：

我已经更新了你的小提琴：http://jsfiddle.net/CShsY/4/

它有很多一般性的改进，还解决了您的第二个问题。你的initMenu() 函数现在看起来像这样：

function initMenu() {
    $('#menu li > a').click(function(e){

        if($(this).next('ul').length > 0){

            e.preventDefault();

            var subNav = $(this).next('ul');

            if (subNav.is(':visible')){
                subNav.slideUp('normal')
                $(this).removeClass("selected");
            }else{
                $('#menu ul:visible').slideUp('normal');
                subNav.slideDown('normal');
                $("a.selected").removeClass("selected");
                $(this).addClass("selected");
            }
        }

    });
}

e.preventDefault() 只是阻止a 的默认操作。我还在那里添加了一个检查，因此任何在它们之后没有 ul 的 a 元素仍将作为常规链接工作。

对于您的第一个问题，您可能想看看这个问题：highlight the navigation menu for the current page。答案基本上是将class 或id 添加到您的body 元素中，该元素唯一地标识页面以及为每个菜单链接添加类。例如：

<body id="home">
    /* other code here */
    <ul id="menu">
        <li><a href="#">Menu 1</a>
            <ul class="home">
            /* more code here */

CSS：

#home #menu ul.home{display:block}
/* The sub menu of 'home' will show on the home page */

【讨论】：

【解决方案2】：

我不确定这是否是最好的方法，但我在点击功能打开后添加了以下行：

if ($(this).is(':visible')) {$('#menu ul:visible').slideUp('normal')};

所以完整的代码如下：

function initMenu() {  
    $('#menu ul').hide();  
    $('#menu li a').click(function () {  
        if ($(this).is(':visible')) {$('#menu ul:visible').slideUp('normal')};  
        var checkElement = $(this).next();  
        if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {  
            $(this).siblings().removeClass("selected");  
            return false;
        }
        if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#menu ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
            if (!$(this).hasClass("selected")) {
                // Remove the class from anything that is active
                $("a.selected").removeClass("selected");
                // And make this active
                $(this).addClass("selected");
            }
            return false;
        }
    });
}
$(document).ready(function () {
    initMenu();
});

【讨论】：

【解决方案3】：

使用 Jquery accordion 插件

要实现第一个功能使用选项active

要实现第二个功能使用选项collapsible

【讨论】：

【解决方案4】：

我可以回答第2点）

当你点击的元素有一个可见的UL作为下一个元素时，你需要添加一个slideUp函数。

即

if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).siblings().removeClass("selected");
    checkElement.slideUp('normal');
    return false;
 }

【讨论】：

【解决方案5】：

我使用了您在此处提供的代码（尝试将它们全部实现到我的手风琴列表中），但问题是父列表项在折叠并打开其子列表时变成了死链接。有没有办法让它成为一个链接，所以当我点击一个有子列表的链接项目时，它会打开它的页面，但也会保持子菜单打开？

【讨论】：

【解决方案6】：

试试这个解决方案，它既适用于突出显示选定的菜单项，也适用于基于选定菜单的滑动控件。

选择菜单功能放在母版页中

<script type="text/javascript">
    function SelectMenu(index) {
        var accordion_head = $('.sidebar-menu > li');
        var main = accordion_head[index];
        $(main).addClass("active");
        $(main).find('a').next().slideDown(200);
    }
</script>

在手风琴菜单中列出的每个页面中，指定以下内容

<script type="text/javascript">
    $(document).ready(function () {
        SelectMenu(1);
    });
</script>

【讨论】：