如何关闭点击菜单和用户点击时的菜单？

Question

我有以下代码：

(function ($) { 
    $(document).ready(function() { 
     $(".clicker_class").click(function() { 
      $('.show_menu_users').show(); 
     }); 
    }); 
})(jQuery); 

$('.clicker_class').click(function (e) { 
    e.stopPropagation(); 
}); 

我是新来的jQuery和有点摸不着头脑。我很容易使用show功能，但是当用户再次点击.clicker_class并且当用户点击其他东西时，我需要使用关闭或隐藏功能来关闭菜单。我试过使用e.stopPropogation（）;但没有工作。考虑到我的上述代码，我该怎么做？

更新：

I got it to close if a user clicks elsewhere using this: 

$(document).mouseup(function (e) 
{ 
    var container = $(".clicker_class"); 

    if (container.has(e.target).length === 0) 
    { 
     $(".show_menu_users").hide(); 
    } 
}); 

问：

现在我只需要在菜单中关闭，当用户点击.clicker_class。我现在怎么办？

Answer 1

更新。如果点击clicker_class元素之外，关闭菜单。

您可以使用布尔值跟踪show_menu_users的状态。当您单击clicker_class元素时，切换菜单并更新布尔值。当你点击文档中的其他地方时，关闭菜单。

(function ($) { 
    $(document).ready(function() { 
     var isShowing = false; 

     var toggleMenu = function() { 
      isShowing = !isShowing; //change boolean to reflect state change 
      $('.show_menu_users').toggle(isShowing); //show or hide element 
     } 

     $(document).on('click', function (e) { 
      if($(e.target).is('.clicker_class') || $(".clicker_class").has(e.target).length !== 0) { 
       toggleMenu(); 
      } else { 
       isShowing = false; 
       $('.show_menu_users').hide(); 
      } 
     }); 
    }); 
})(jQuery); 

Working example here.

Answer 2

看看它适合您的需要：

$(function(){ 
    //we set a tabindex attribute in case of this element doesn't support natively focus 
    //outline just for styling 
    $(".clicker_class").prop('tabindex',-1).css({outline:0}); 
}); 

$(".clicker_class").click(function() { 
    $('.show_menu_users').toggle(); 
}).on('focusout',function(){ 
    $(this).hide(); 
}); 

Answer 3

食物安全中心解决方案的作品，但还有一个更简单的方法来做到这一点，没有立足自己在一个全局变量（这是更好地避免）。

jQuery的“.toggle（）”函数（不带参数）隐藏你的元素，如果它是可见的，并显示它，如果它不是。然后当你点击按钮时，你只需要启动$（“.show_menu_users”）.toggle（），当你点击文档时隐藏菜单。问题是，点击任何元素将关闭菜单，以防止它，你只需要通过停止事件传播“event.stopPropagation（）”

$(document).ready(function() { 
    $(".clicker_class").on("click", function (event) { 
     event.stopPropagation(); 

     $(".show_menu_users").toggle(); 
    }); 

    $(document).on("click", function() { 
     $(".show_menu_users").hide(); 
    }); 

    $(".show_menu_users").on("click", function (event) { 
     event.stopPropagation(); 
    }); 
}); 

Working example here

Answer 4

我用这个方法，我认为这是一个更清晰的答案。

添加到您的html页面刚过/开/关标记之前：

<div class="main-mask"></div> 

然后在您的js文件：

(function() { 

    'use strict'; 

    $(".sidenav-toggle").on("click", function() { 
     $("#sidenav").toggleClass("sidenav--open"); 
     $(".main-mask").toggleClass("main-mask-visible"); 
    }); 

    $(".main-mask").on("click", function() { 
     $("#sidenav").toggleClass("sidenav--open"); 
     $(".main-mask").toggleClass("main-mask-visible"); 
    }); 

})(); 

在你的CSS：

.main-mask { 
    height: 100%; 
    left: 0; 
    opacity: 0.1; 
    top: 0; 
    visibility: hidden; 
    width: 100%; 
    z-index: 1; 
    position: fixed; 
} 

这样，你的面具就像点击一样。您可以绑定/取消绑定事件，并将.main-mask类与其他元素一起使用。缺点是它需要被添加到页面中。您可以使用css body:after {content:''}删除该依赖项。