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");

}

P.S。我添加了这两个元素的所有代码，因为也许它们有问题...

Answer 1

从概念上讲：

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

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

在此新事件处理程序中：

如果用户单击您的弹出窗口/元素，其子级或打开弹出窗口/元素的原始按钮，则不执行任何操作。
如果他们点击了除弹出菜单/元素或原始按钮之外的任何内容，然后将弹出窗口/元素切换回隐藏选项，并在{{1}上删除了事件监听器}。

jQuery如果在元素隐藏之外单击，则隐藏，但如果在按钮上单击则显示/隐藏

1 个答案: