Javascript 如何在单击时关闭菜单，以及当用户单击时关闭菜单？

我有以下代码：

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

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

我不熟悉JQuery，有点困惑。我可以很容易地使用show功能，但是当用户再次单击clicker_类以及当用户单击其他内容时，我需要使用close或hide功能来关闭菜单。我试着使用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\u类。我现在怎么做？

看看它是否适合您的需要：

$(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();
});

---

如果在

clicker\u类

元素之外单击，则更新为关闭菜单

您可以使用布尔值跟踪

显示菜单用户的状态。单击
clicker\u 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);

Cfs的解决方案可行，但有一种更简单的方法可以做到这一点，而无需基于全局变量（最好避免）

jQuery的“.toggle（）”函数（不带参数）在元素可见时隐藏元素，不可见时显示元素。然后，您只需在单击按钮时启动$（“.show_menu_users”）.toggle（），并在单击文档时隐藏菜单。问题是，单击任何元素都会关闭菜单，为了防止它，您只需使用“event.stopPropagation（）”停止事件传播即可

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

在开始/结束正文标记之后/之前添加到html页面：

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

在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:'}
删除该依赖项。
谢谢。但是，我如何将您的代码与我上面的更新合并？关于在用户单击其他位置时关闭上面的菜单？星巴克我更新了我的答案和JSFIDLE，所以现在当您从
clicker\u class
中单击时，它应该关闭菜单。我的菜单无法使用。我不确定自己是否做错了什么。。让我再试一次。我没有测试它，可能缺少什么
(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");
  });

})();

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