Question

我对整个jQuery场景都很陌生，所以如果我愚蠢的话我会道歉但是我自己也尽力解决这个问题。

我正在使用jQuery来操作CSS UL菜单。我有一个jQuery，它适用于3/4的要求。 jQuery在带有子节点的UL中查找任何项目并向其附加跨度。跨度用于存放下拉箭头以打开子菜单。

单击子菜单打开它没关系，单击页面上的任意位置隐藏子菜单可以使用我添加的$（文档）功能，但出于某种原因，一旦子菜单打开，第二个.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");

带有If语句的jQuery .click函数仅适用于.show（）案例

1 个答案: