单击子项jQuery后保持菜单打开

Question

我已经搜索过，但没有找到我要找的东西。

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

但我意识到，当您单击 Hyperlink 2 的子项时，它会完全关闭 Hyperlink 2。有没有办法让它保持打开状态？

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

我尝试使用来自Here 的模拟点击答案，但除非我放置错误，否则它不起作用。

我还是 javascript/jQuery 的新手，但我正在慢慢掌握它！

谢谢

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

Answer 1

停止传播被点击的孩子：

DEMO

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

Answer 2

将点击事件的选择器更改为".drop>a" 似乎可行。 然后，您需要做的就是管理 li 略有不同，类似于：

$(".drop>a").on('click', function (eventData) {
    var $listItem = $(this).closest('li');

    $listItem.find('ul').toggle();
    $listItem.toggleClass('open');

    $.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(','));
});

---

DEMO - 单击内部链接时保持菜单打开

---

Answer 3

您不应将 click 事件应用于 .drop 元素，而应应用于它们的子元素。比如：

<div class="drop">
   <a class="click-to-open">Click here to open</a>
      <ul>
         <li>Sub links etc...</li>
         <li>...</li>
      </ul>
 </div>


 $('.drop .click-to-open').click(function() {

   //toggle the open class etc

   //use .parent() to access the .drop div
   $(this).parent().toggleClass('open');

 });