如何点击菜单并在用户点击时关闭菜单？

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

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

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

这里的工作示例

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

如果在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);

这里的工作示例。

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:''}删除该依赖项。