javascript - JQuery 如果在元素外部单击隐藏，但如果单击按钮也显示/隐藏

Question

我在这里遇到一个问题。我有两个要素。一个是按钮，另一个是菜单。我需要解决我第一次单击按钮时出现的问题，菜单打开，但当我第二次单击时却没有。当我在菜单外单击时，它会关闭(很好!)。所以我需要使用按钮关闭/打开元素并在元素外部单击。

这是我的代码:

$(".left-menu-block-one").click(function () {
    $("#first-bar").toggleClass("show");
    if ($("#second-bar").hasClass("show") || $("#third-bar").hasClass("show")) {
        $("#second-bar").removeClass("show");
        $("#third-bar").removeClass("show");
    }
    $(".left-menu-block-one").toggleClass("hide-menu-bars");
    if ($("#first-bar").hasClass("show")) {
        $(".left-menu-block-two").addClass("hide-menu-bars");
        $(".left-menu-block-three").addClass("hide-menu-bars");
    }
})
var container2 = $("#first-bar");
if (!container2.is(e.target) && container2.has(e.target).length === 0) 
{
    $("#first-bar").removeClass("show");
    $(".left-menu-block-one").addClass("hide-menu-bars");

}

附言我为这两个元素添加了所有代码，因为它们可能存在问题...

Answer 1

概念上这样做:

当用户单击按钮时，您的代码将在显示 和隐藏 之间切换弹出窗口/元素。 (您的代码可能已经这样做了。)

当弹出窗口/元素更改为显示 时，使用“capture”在文档 上添加点击事件监听器'模式。

在这个新的事件处理程序中:

1. 如果用户点击您的弹出窗口/元素、其子元素或打开弹出窗口/元素的原始按钮，则什么也不做。
2. 如果他们点击除您的弹出窗口/元素或原始按钮之外的任何内容，则将弹出窗口/元素切换回隐藏并删除文档上的事件监听器。