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

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

jquery html menu

Jquery手风琴菜单-保持所选菜单打开,jquery,html,menu,accordion,Jquery,Html,Menu,Accordion,我正在尝试为我正在开发的网站创建一个竖直的手风琴菜单。这是我第一次用jquery做任何事情。我已经能够按照我想要的方式得到一份工作菜单，除了一些事情 1）我需要一个菜单，它将根据加载的页面保持展开状态，如果您单击第二个菜单中的某个项目，则在重新加载页面时需要展开第二个菜单。从菜单中单击并加载新页面时，菜单不会保持展开状态。重新加载页面时，它会完全折叠，直到您单击页眉再次展开它。我在网上搜索了好几天，找不到任何可以用来解决这个问题的东西。我已经研究了使用jquery cookie插件，只是查看当

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

谢谢

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

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

使用Jquery插件

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

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

我已更新了您的小提琴：

它有很多一般性的改进，还修复了第二个问题。您的

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");
            }
        }

    });
}

仅防止

的默认操作。我还在那里添加了一个签入，因此任何

元素如果在它们之后没有

ul

，仍然可以作为常规链接使用

对于您的第一个问题，您可能想看看这个问题：。答案基本上是向

主体

元素添加一个

类

或

id

，该元素唯一地标识页面，并向每个菜单链接添加类。例如：

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

我可以回答第2点）

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

i、 e

我使用了您在这里提供的代码（尝试将它们逐一实现到我的手风琴列表中），但问题是父列表项在折叠并打开其子列表时变成了死链接。

有没有办法使其成为链接，因此当我单击具有子列表的链接项时，它会打开其页面，但同时也会保持子菜单打开？

尝试此解决方案，它既可以高亮显示选定的菜单项，也可以基于选定的菜单进行滑动控制

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

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


功能选择菜单（索引）{
var accordion_head=$（'.侧栏菜单>li'）；
var main=手风琴头[索引]；
$（主）.addClass（“活动”）；
$（main）.find（'a'）.next（）.slideDown（200）；
}

在accordian菜单中列出的每一页中，指定以下内容

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


$（文档）.ready（函数（）{
选择菜单（1）；
});

也许可以签出一个已经为您构建了这些选项的插件。

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