Javascript JQuery如果在元素外部单击，则隐藏；如果在按钮上单击，则显示/隐藏

我正在努力解决一个问题。我有两个要素。一个是按钮，另一个是菜单。我需要解决一个问题，当我第一次点击按钮时，菜单会打开，但当我第二次点击时，菜单不会打开。当我在菜单外点击时，它就会关闭（这很好！）。因此，我需要元素在单击时用按钮关闭/打开，并在元素外部单击

这是我的密码：

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

}

另外，我添加了这两个元素的所有代码，因为它们可能有问题…

从概念上讲，这样做：

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

当弹出窗口/元素更改为“显示”时，然后使用“”模式在

文档

上添加单击事件侦听器

在此新事件处理程序中：

如果用户单击弹出窗口/元素、其子项或打开弹出窗口/元素的原始按钮，则不执行任何操作

如果他们单击除弹出窗口/元素或原始按钮之外的任何内容，则将弹出窗口/元素切换回隐藏状态，并删除

文档上的事件侦听器