Question

我已经搜索过，但找不到我想要的内容。

我的菜单使用cookies，所以当重新加载页面时，它会保持打开，打开的菜单。

但是我意识到当你点击超级链接2的子项时，它将完全关闭超链接2。有没有办法让它保持开放？

我尝试使用来自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');

 });

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

3 个答案: