Javascript 在div外部单击->；函数之间相互抵消

我有一个div（“.settings”），我想在外部单击时隐藏它，我在StackOverflow上找到了最后一段代码。我的问题是，当单击div“.settingsButton”时，如果我使用最后一个函数，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，并将最近的（“settings”）更改为最近的（“settingsButton”），正如@phts所说的那样

下面的if语句使打开的div在单击时不会关闭

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

（编辑）这应该行得通

$(document).ready(function(){

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

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

});

---

另一个编辑，错误的类名设置按钮，现在可以工作了

由于一个输入错误，您的代码无法工作：

closest(".settings").

应该是

closest(".settingsButton").

---

@如果

是（“.settings”））

替换为

是（“.settingsButton”））

谢谢！现在就像一个魔咒：）