Question

我正在尝试为我正在制作的网站创建垂直手风琴菜单。这是我第一次用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/

感谢。

Answer 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的默认操作。我还添加了一张支票，因此任何a元素之后没有ul的元素仍可用作常规链接。

对于您的第一个问题，您可能需要查看此问题：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 */

Answer 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();
});

Answer 3

使用Jquery accordion插件

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

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

Answer 4

我可以回答第2点）

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

即

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

Answer 5

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

Answer 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>

Jquery手风琴菜单 - 保持所选菜单打开

6 个答案: