jQuery技术:jQuery:触发关闭移动导航菜单

我有一个非常基本的jQuery点击function,可以切换移动导航菜单的显示 – 由媒体查询触发的汉堡包式 – 如下所示:

// mobile menu click function $(".mobile-nav-toggle").click(function () { $(".mobile-nav-menu").slideToggle(); }); 

因此,单击.mobile-nav-toggle div会触发位于主标题栏下的.mobile-nav-menu的外观。 我的问题是 – 通过点击/点击菜单本身以外的任何地方,通过jQuery触发关闭/隐藏菜单有一个简单的方法吗? 目前,人们只能通过重新点击/点击切换按钮来关闭菜单。

感谢您的任何见解。

    您可以将单击处理程序添加到文档本身中

     // mobile menu click function $(".mobile-nav-toggle").click(function() { $(".mobile-nav-menu").slideToggle(); }); $(document).click(function(e) { //if the click has happend inside the mobile-nav-menu or mobile-nav-toggle then ignore it if (!$(e.target).closest('.mobile-nav-menu, .mobile-nav-toggle').length) { $(".mobile-nav-menu").slideUp(); } }) 
     body { min-height: 100px; background-color: lightgrey; } .mobile-nav-menu { display: none; } 
       
    menu

    这是工作代码

     $(".mobile-nav-toggle").click(function (event) { event.stopPropagation(); $(".mobile-nav-menu").slideToggle(); }); $(document).click( function(){ $('.mobile-nav-menu').hide(); }); 

      以上就是jQuery教程分享jQuery:触发关闭移动导航菜单相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。

      本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。

      ctvol管理联系方式QQ:251552304

      本文章地址:https://www.ctvol.com/jquerytutorial/532167.html

      (0)
      上一篇 2020年12月21日
      下一篇 2020年12月21日

      精彩推荐