Question

我正在执行“隐藏和显示”下拉菜单中的代码，单击“触发和隐藏”按钮，然后单击主体上的“隐藏”，除了触发按钮之外，它都可以正常工作。但是，如果我单击下拉菜单，它也会隐藏下拉菜单。我不想在打开的下拉菜单中单击鼠标单击功能

请检查以下代码，并告诉我我做错了什么这是我的HTML

<div class="mhb-item-inner tabletMobile">
<a class="mobile-menu-toggle" href="#"><i class="icon-menu-fine"></i></a>
    <ul id="menu-main-menu-4" class="menu" style="display: block;">
        <li class="menu-item menu-item-4667 submenu"><a href=><span>SEARCH HOME</span></a>
            <ul class="sub-menu">
                <li class=""><a target="_blank" href=""><span>Search All Homes</span></a></li>
                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4669"><a target="_blank" href=""><span>Luxury Homes</span></a></li>
            </ul>
            <span class="menu-toggle"></span>
        </li>
        <li class="menu-item menu-item-4677 submenu"><a href="#"><span>SEARCH BY SCHOOL DISTRICT</span></a>
                <ul class="sub-menu">
                    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4678"><a target="_blank" href=""><span>Avon Grove</span></a></li>
                    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4679"><a target="_blank" href=""><span>Coatesville</span></a></li>
                </ul>
                <span class="menu-toggle"></span>
        </li>           
    </ul>
</div>

jQuery(document).click(function(e){
var lernerMenu = jQuery('.tabletMobile .mobile-menu-toggle');
var lernerMenuMenu = jQuery('.tabletMobile .mhb-menu .menu');
if (!lernerMenu.is(e.target) && lernerMenu.has(e.target).length === 0)
{
jQuery('#menu-main-menu-4').hide();
} else {
jQuery('#menu-main-menu-4').show();
}
});

它工作正常，并且在单击主体时隐藏div，但是如果单击打开的下拉菜单，则也隐藏div。我不想关闭单击的下拉菜单，因为它包含菜单项的子菜单。希望对您有帮助

Answer 1

如果要基于单击进行隐藏和显示，请使用jQuery切换。那样就不需要使用if / else来维持状态。此外，将ID分配给要切换的元素，而不是使用类进行访问。

Answer 2

尝试一下

jQuery(document).click(function(e){
    var lernerMenu = jQuery('.tabletMobile .mobile-menu-toggle');
    var lernerMenuMenu = jQuery('.tabletMobile .mhb-menu .menu');
    if (!lernerMenu.is(e.target) && lernerMenu.has(e.target).length === 0 && $(e.target).closest('.tabletMobile').length===0){
        jQuery('#menu-main-menu-4').hide();
    } else {
        jQuery('#menu-main-menu-4').show();
    }
});

我想隐藏单击主体时的下拉菜单，并单击切换按钮时显示

2 个答案: