1

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

谢谢。

4

6 回答 6

2

我已经更新了你的小提琴：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在它们之后的元素仍然可以作为常规链接工作。

对于您的第一个问题，您可能想看看这个问题：突出显示当前页面的导航菜单。答案基本上是向您的元素添加class或添加唯一标识页面的元素，以及向每个菜单链接添加类。例如：idbody

<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 */
于 2013-04-29T21:10:01.150 回答
0

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

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();
});
于 2013-04-29T21:09:40.440 回答
0

使用 Jquery手风琴插件

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

要实现第二个功能，请使用可折叠选项

于 2013-04-29T21:09:51.850 回答
0

我可以回答第2点）

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

IE

if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).siblings().removeClass("selected");
    checkElement.slideUp('normal');
    return false;
 }
于 2013-04-29T21:11:06.513 回答
0

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

于 2013-06-11T15:57:23.753 回答
0

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

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

<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>
于 2016-03-09T05:03:27.857 回答