每当我点击网页的任何部分时都要关闭菜单

Question

单击切换按钮会打开菜单，如果我点击网页的任何部分，我希望菜单关闭

$('.category-toggle button').on('click',function(){
        $('.category-toggle').toggleClass('active');
      });

      var $CategoryTtoggle = $('.category-toggle');

      $CategoryTtoggle.each(function () {
        var $this = $(this);

        $this.on('clickoutside touchendoutside', function () {
          if ($this.hasClass('active')) { $this.removeClass('active'); }
        });
      });

Answer 1

您可以在文档上捕获click事件，如果在菜单容器外单击它，则删除活动类。

$('.category-toggle button').on('click',function(){
    $('.category-toggle').toggleClass('active');
});

jQuery(document).on('click', function(e){
    var $CategoryTtoggle = $('.category-toggle');
    if (!$CategoryTtoggle.is(e.target) && $CategoryTtoggle.has(e.target).length === 0 )
    {
        $CategoryTtoggle.removeClass('active'); 
    }
});

Answer 2

也许尝试这样的事情。如果点击事件不是来自.active或来自.category-toggle的孩子，则只会移除课程.category-toggle。

$('.category-toggle button').on('click',function(){
    $('.category-toggle').toggleClass('active');
});

$(document).on("click", function(e) {
    if (!$(e.target).closest(".category-toggle").length) {
        $(".category-toggle").removeClass("active")
    }  
})

这是一个模拟效果的工作小提琴：https://jsfiddle.net/qeaxu9c9/3/

Answer 3

您可以使用事件处理程序检测菜单外的点击。

    $(document).ready(function(){
        $(".category-toggle button").click(function(event) {
          event.stopPropagation(); //prevents event bubbling for parent elements
            $(".category-toggle .active").removeClass("active"); //to make sure that only one menu is opened at a time
            $(this).find(".category-toggle").toggleClass("active");
        });

       //To detect mouse click outside the menu bar     
       $("html").click(function() {
            $(".category-toggle").removeClass("active"); 
        });
    });