Question

我有一个div（＆＃34; .settings ＆＃34;）我想在外面点击时隐藏，我在StackOverflow上找到了最后一段代码。我的问题是，当div＆＃34; .settingsButton ＆＃34;单击，如果我使用最后一个函数，则div不会打开。

我可以看到这两个函数相互抵消，但不知道如何解决它。

$(document).ready(function(){

  $(".settingsButton").click(function(){

    if(!$(".settings").hasClass("hide")) {
      $(".settings").addClass("hide");

    } else {
      $(".settings").removeClass("hide");
    }
 });

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

   if(!$(event.target).closest(".settings").length) {
     if(!$(".settings").hasClass("hide")) {
       $(".settings").addClass("hide");
     }
   }
 });

});

修改这是工作代码

$(document).ready(function(){

  $(".settingsButton").click(function(){
    $(".settings").toggleClass("hide");
  });

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

    if(!$(event.target).closest(".settingsButton").length && !$(event.target).closest(".settings").length) {
        if(!$(".settings").hasClass("hide")) {
            $(".settings").addClass("hide");
        }
    }
});

}）;

我将第一个函数中的第一个if语句更改为 .toggleClass ，并将最接近。（＆＃34;设置＆＃34;）更改为最近。（＆＃34; settingsButton＆＃34;）正如@phts所说。

下面的if语句使得open div在点击时不会关闭。

if(!$(event.target).closest(".settingsButton").length && !$(event.target).closest(".settings").length)

Answer 1

（已编辑）这应该有用

$(document).ready(function(){

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

   if(!$(event.target).is(".settingsButton")) {
       $(".settings").addClass("hide");
   } else $(".settings").toggleClass("hide");
 });

});

另一个编辑，错误的班级名称设置按钮，现在正常工作

Answer 2

由于一个拼写错误，您的代码无法正常工作：

closest(".settings").

应该是

closest(".settingsButton").

http://jsfiddle.net/v2ddjd7d/2/

如果is(".settings"))替换为is(".settingsButton"))

，

@ ddlab的答案也有效

单击div外部 - ＆gt;功能相互抵消

2 个答案: