Я хочу скрыть раскрывающийся список при нажатии на тело и показать при нажатии кнопки переключения - PullRequest
Новая
       40

Я хочу скрыть раскрывающийся список при нажатии на тело и показать при нажатии кнопки переключения

0 голосов
/ 06 апреля 2019

Я делаю код скрытия и отображения раскрывающегося списка при нажатии кнопки триггера и скрытия при нажатии тела, кроме кнопки триггера, она работает нормально. Но он также скрывает раскрывающийся список, если я нажимаю на раскрывающееся меню. Я не хочу выполнять функцию щелчка тела при нажатии раскрывающегося раскрывающегося списка

Пожалуйста, проверьте код ниже и скажите, что я делаю не так Вот мой 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, если я щелкаю по раскрывающемуся раскрывающемуся списку. Я не хочу закрывать раскрывающийся список по его щелчку, поскольку он содержит подменю для пункта меню. Я надеюсь, что это поможет вам

Ответы [ 2 ]

0 голосов
/ 06 апреля 2019

Попробуйте это 

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();
    }
});
0 голосов
/ 06 апреля 2019

используйте переключение jQuery, если вы хотите скрыть и показать на основе кликов ... таким образом, вам не нужно поддерживать состояние, используя if / else .. Более того, присвойте id элементу, который вы хотите переключить, а не доступу с помощью классов ..

...