javascript - 带有 If 语句的 jQuery .click 函数仅适用于 .show() 情况

Question

我对整个 jQuery 场景还很陌生，所以如果我很愚蠢，我深表歉意，但我已经尽最大努力自己解决这个问题。

我正在使用 jQuery 来操作 CSS UL 菜单。我有一个 jQuery，可以满足 3/4 的要求。 jQuery 查找 UL 中带有子项的所有项，并向它们附加一个跨度。跨度用于容纳下拉箭头以打开子菜单。

单击子菜单可以打开它，单击页面上的任意位置可以隐藏子菜单，可以使用我添加的 $(document) 函数，但由于某种原因，一旦子菜单打开，第二个.click 函数中的 if 语句的一半不会关闭菜单。

有什么想法吗？平台是 WordPress，菜单是由 wp_nav_menu 生成的。

jQuery 脚本的非功能部分是 else 后面的 if 语句的后半部分。

jQuery

$(document).ready(function(){
$('div.sub-menu-wrap').parent().append('<span> v </span>');
$('ul.nav-menu li span').hover(function(){
$(this).toggleClass('hover');
})

$('ul.nav-menu li span').click(function() {
    if(!$('div.sub-menu-wrap').is(':visible')) {
        $('ul.nav-menu li span').parent().addClass('drop');
        $('ul.nav-menu li span').siblings('a').addClass('drop');
        $('div.sub-menu-wrap').show();
    } else {
        $('ul.nav-menu li span').parent().removeClass('drop');
        $('ul.nav-menu li span').siblings('a').removeClass('drop');
        $('div.sub-menu-wrap').hide();
    }
})

$(document).mouseup(function(e){
    var container = $("div.sub-menu-wrap");
    if (!container.is(e.target)         
    && container.has(e.target).length === 0)
        {
        $('ul.nav-menu li span').parent().removeClass('drop');
        $('ul.nav-menu li span').siblings('a').removeClass('drop');
        $('div.sub-menu-wrap').hide();
        }
    });
});

现在添加了 HTML。

    <div class="nav-menu-wrap">
    <ul class="nav-menu" id="menu-navigation-menu">
    <li class="first-item menu-item menu-item-type-post_type menu-item-object-page menu-item-251" id="menu-item-251"></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-261 current_page_item menu-item-has-children menu-item-271" id="menu-item-271">
    <div class="sub-menu-wrap" style="display: none;">
        <ul class="sub-menu">
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-441" id="menu-item-441"></li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-461" id="menu-item-461"></li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-451" id="menu-item-451"></li>
        </ul>
    </div>
    <span> v </span>
    </li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-241" id="menu-item-241"></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-211" id="menu-item-211"></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-201" id="menu-item-201">li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-221" id="menu-item-221"></li>
    <li class="last-item menu-item menu-item-type-post_type menu-item-object-page menu-item-231" id="menu-item-231"></li>
</ul>
</div>

Answer 1

问题是你的 $(document).mouseup 函数。它在 UL 上的单击事件之前触发，并且隐藏子菜单。当您进入 UL 点击事件时，子菜单包装器被隐藏，因此您只会遇到 if 语句中的第一个条件。

如果将文档 mouseup 更改为此，它应该可以工作。只需将主菜单包装器添加到您的容器中，以便您忽略 mouseup 事件。

var container = $("div.sub-menu-wrap, div.nav-menu-wrap");