使用事件侦听器和父节点单击body关闭菜单

Question

当用户单击页面上的任意位置时，我想关闭重新调整大小的菜单。我已经搜索了各种堆栈溢出的答案，但没有找到一个不会干扰菜单代码本身，我的菜单...

​

jQuery(document).ready(function($) {
  //open-close submenu on mobile
  $('.cd-main-nav').on('click', function(event) {
    if ($(event.target).is('.cd-main-nav'))
      $(this).children('ul').toggleClass('is-visible0');
  });
  //i have tried adding this but hasn't worked
  $('html').click(function() {
    if ($('.cd-main-nav').children('ul').hasClass('is-visible0')) $(this).children('ul').toggleClass('is-visible0');

  });
});

​

Answer 1

$('html').click(function() {
     //Hide the menus if visible
});

包含此代码，因为它检测到在html页面上的任意位置单击，还可以确保当您单击您想要的元素时，html不会触发

$('.cd-main-nav').on('click', function(event) {
event.stopPropagation();
// rest of your code here
});