单击子项目jQuery后保持菜单打开 [英] Keep menu open after clicking sub-item jQuery

问题描述

我已经搜索了，但没有找到我想要的东西.

I've searched and not found exactly what I was looking for.

我的菜单使用cookie，因此在重新加载页面时，它会保持打开菜单的状态.

I have my menu working with cookies so when the page is reloaded it keeps the menus that were open, open.

但是我意识到当您单击说Hyperlink 2的一个子项目时，它将完全关闭Hyperlink 2.有没有办法让它保持打开状态?

But I realised when you click say a sub-item of Hyperlink 2 it will close Hyperlink 2 altogether. Is there a way too keep it open?

http://jsfiddle.net/Dnamixup/5S54v/

我尝试使用

I tried using the simulate click answer from Here but it didn't work unless I placed it wrong.

我对javascript/jQuery还是陌生的，但我正在慢慢了解它！

I'm still new at javascript/jQuery but I'm slowly getting it!

谢谢

<ul class="nav">
<li><a>Hyperlink 1</a>

</li>
<li class="drop"><a>Hyperlink 2</a>

    <ul id="m1">
        <li><a href="#">Hyperlink Sub</a>

        </li>
        <li><a href="#">Hyperlink Sub</a>

        </li>
    </ul>
</li>
<li class="drop"><a>Hyperlink 3</a>

    <ul id="m2">
        <li><a href="#">Hyperlink Sub</a>

        </li>
        <li><a href="#">Hyperlink Sub</a>

        </li>
    </ul>
</li>
<li class="drop"><a>Hyperlink 4</a>

    <ul id="m3">
        <li><a href="#">Hyperlink Sub</a>

        </li>
        <li><a href="#">Hyperlink Sub</a>

        </li>
    </ul>
</li>

jQuery(function ($) {
// jQuery code in here can safely use $
$('.nav li')
    .css({
    cursor: "pointer"
});

$(".drop")
    .on('click', function () {
    $(this).toggleClass('open');
    $(this).find('ul').toggle();
    $.cookie('open_items', 'the_value');
    openItems = new Array();
    $("li.drop").each(function (index, item) {
        if ($(item).hasClass('open')) {
            openItems.push(index);
        }
    });
    $.cookie('open_items', openItems.join(','));
});

if ($.cookie('open_items') && $.cookie('open_items').length > 0) {
    previouslyOpenItems = $.cookie('open_items');
    openItemIndexes = previouslyOpenItems.split(',');
    $(openItemIndexes).each(function (index, item) {
        $("li.drop").eq(item).addClass('open').find('ul').toggle();
    });
}
});

推荐答案

停止传播被点击的孩子:

Stop propagation of clicked children:

演示

 $(".drop li a")
        .on('click', function (e) {
            e.stopPropagation();
        });

这篇关于单击子项目jQuery后保持菜单打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！