Question

我想创建一个下拉菜单，当我点击它时它会消失。我尝试过使用e.stopPropagation（）;但没有快乐。这就是所有其他论坛帖子似乎建议的内容..

这是我的JS：

$(document).ready(function() {
$("button").click(function() {
    $(".content1").toggleClass("active");
});


$(".burger").click(function() {
    $(".lmao").toggleClass("show");
        event.stopPropagation();
});

});

感谢。

Answer 1

从上面的代码中，我假设$（“。lmao”）是下拉菜单的选择器。

首先，你这样做：

//you had forgotten to pass event in your handler before
$(".burger").on("click", function(event) {
    $(".lmao").toggleClass("show");
    event.stopPropagation(); 
});

然后你需要在文档上设置一个事件处理程序，检查你在下拉列表中的下载天气或者你的下拉列表，如下所示：

$(document).on("click", function(event){

   //if the click event didn't come from an element inside .lmao
   if($(event.target).closest(".lmao").length === 0){
          $(".lmao").removeClass("show");
   }
}

Answer 2

因此，您将除了下拉菜单之外的所有元素都设置为具有特定ID的元素，如果用户点击此ID，则会隐藏下拉菜单。

或者：

$('body').click(function(e){    
    if(e.target.id !== "dropdownMenu") {
        $("#dropdownMenu").toggleClass("hide");
    }
});

我点击时隐藏的下拉菜单

2 个答案: