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

Question

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

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

单击子菜单可以打开它，然后单击页面上的任意位置隐藏子菜单可以使用我添加的 $(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");