javascript - 如何在单击时以及用户单击时关闭菜单？

Question

我有以下代码:

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

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

我是 JQuery 的新手，有点困惑。我可以很容易地使用显示功能，但是当用户再次单击 .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(); 
    }); 
}); 

Working example here