Question

我有一个移动菜单的结构。

<nav id="mobile-menu" class="fa fa-bars">
    <ul id="#menu-header-menu-mobi" class="menu" style="display: block;">
        <li id="menu-item-27-mobi" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-has-children menu-item-27"><a href="javascript:;">About Us</a>

            <ul class="sub-menu">
                <li id="menu-item-24-mobi" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a href="http://localhost/Sites/wp/?page_id=4">Our Environment</a>
                </li>
                <li id="menu-item-25-mobi" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="http://localhost/Sites/wp/?page_id=6">Our History</a>
                </li>
                <li id="menu-item-23-mobi" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="http://localhost/Sites/wp/?page_id=8">Executive Team</a>
                </li>
                <li id="menu-item-22-mobi" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="http://localhost/Sites/wp/?page_id=10">Core Values</a>
                </li>
            </ul>
        </li>
        <li id="menu-item-28-mobi" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-28"><a>Companies</a>

        </li>
        <li id="menu-item-20-mobi" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="http://localhost/Sites/wp/?page_id=12">Careers</a>
        </li>
        <li id="menu-item-19-mobi" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19"><a href="http://localhost/Sites/wp/?page_id=16">Blog</a>
        </li>
        <li id="menu-item-21-mobi" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://localhost/Sites/wp/?page_id=14">Contact</a>
        </li>
    </ul>
</nav>

然后我有以下javascript来打开和关闭有孩子的菜单项。

$("#header nav#mobile-menu li.menu-item-has-children").on("click", function (event) {
    event.preventDefault();
    var t = $(this);
    var sub = t.children("ul.sub-menu");
    if (sub.hasClass("open")) {
        sub.removeClass("open");
    } else {
        sub.addClass("open");
    }
    return false;
});

这有效，但问题是当我单击子项时，再次运行此脚本，因为子项包含在父li标记中。有没有办法我可以重做这个以获得相同的功能，但仍然有子li标签中的链接工作？感谢。

Answer 1

您可以使用event.stopPropagation来阻止事件冒泡到父元素。

Answer 2

您还可以检查该事件是否来自列表项，而不是它的子项

$("#mobile-menu li.menu-item-has-children").on("click", function(event){

    if (event.target === this) {

        event.preventDefault();
        $(this).children("ul.sub-menu").toggleClass('open');

    }
});

将点击逻辑限制为父li标签

2 个答案: