jquery 隐藏移动的菜单上点击网站上的任何地方[重复]

vatpfxk5 于 2023-04-05 发布在 jQuery

关注(0)|答案(2)|浏览(304)

此问题在此处已有答案：

Mobile Menu - Click outside menu to close menu（2个答案）
7个月前关闭。
我有一个问题，我想隐藏菜单上点击网站上的任何地方，但没有什么对我来说是有效的：（这里是我的代码关闭按钮：

$('.menu-toggle').on('click',function(e){
        e.preventDefault();
        if ( $('.lang-mobile').hasClass('is-open') ){
            $('.lang-mobile a').trigger('click')
        }
        if ( !$('header').hasClass('is-open')){
            $('header').addClass('is-open');
            $('#navbar-main').fadeIn();
        }
        else {
            $('header').removeClass('is-open');
            $('#navbar-main').fadeOut();
        }

下面是我的一些HTML结构

<header class="header clear is-open" role="banner">

    <div class="navbar" id="navbar-main" style="display: block;">
<div class="navbar-container" style="height: 797px;">
<div class="navbar-item">

我试过这样的方法

$(document).click(function() {
    var container = $("#navbar-main");
    if (!container.is(event.target) && !container.has(event.target).length) {
        container.hide();
    }
});

它不工作了，你能帮我吗？这里有什么不正确的？

jquery

来源：https://stackoverflow.com/questions/73476167/hide-mobile-menu-on-click-anywhere-on-a-website

2条答案

按热度按时间

wkyowqbh1#

此代码段处理两种情况。

每次点击页面时，它都会检查标题是否打开并关闭它
每次单击.menu-toggle项都会打开或关闭标题

<script>
    $(document).on('click', function() {
        var header = $(".header");
        if ( header.hasClass('is-open') ) {
            header.fadeOut();
            header.removeClass('is-open');
        }
    });

    $('.menu-toggle').on('click', function() {
        var header = $(".header");
        if ( !header.hasClass('is-open') ) {
            header.fadeIn();
            header.addClass('is-open');
        } else if ( header.hasClass('is-open') ) {
            header.fadeOut();
            header.removeClass('is-open');
        }
    });
</script>

赞(0）回复(0）举报 2023-04-05

tjjdgumg2#

感谢Youssouf Oumar分享这个链接作为一个答案-Mobile Menu - Click outside menu to close menu这是唯一的事情，为我工作！我只添加了一些必要的部分，这段代码，所以在这里你去，如果有人像我一样的菜鸟，需要更多的细节：D

$(document).mouseup(function(e){
   var header = $ (".header, .lang-mobile"); //I have two toggle menus with class that collapse navbars, I also have animation on toggle button that's why I need them also to work
   var menu = $(".navbar, .dropdown");//this is to hide menus 
   if (!menu.is(e.target) // The target of the click isn't the container.
   && menu.has(e.target).length === 0) // Nor a child element of the container
   {
      header.removeClass('is-open');
      menu.hide(); 
   }
});

赞(0）回复(0）举报 2023-04-05

我来回答

jquery 隐藏移动的菜单上点击网站上的任何地方[重复]

2条答案

相关问题

热门标签

最新问答