Question

我最近和最近的一些问题都没有收到，所以我想提一下你应该善待。其他一些人甚至没有明显的理由投票我的问题，没有任何评论暗示他们的推理。我不喜欢这样，因为它让我有被禁止询问的风险。是的，我知道我的一些帖子并不是最经常考虑的，但是人们往往会对我一直在我面前的一个简单错误作出反应。现在，关于这个问题。

TL; DR：善良！

我有一个设置div：

<div id="settings">
    <p><a href="settings.php" class="settings">Search Settings</a></p>
    <p><a href="sync.php" class="settings">Sync Settings</a></p>
    <p><a href="anon.php" class="settings">Go Anonymous</a></p>
</div>

为了打开这个div，我有一个按钮：

<a onClick="openSettings()" href="#" class="footer" id="settings-button">Settings</a>

为了让按钮打开div，我有一些简单的JavaScript：

$("html").click(function(){
    $("#settings").slideUp()
});

$("#settings").click(function(e){
    e.stopPropagation();
});

function openSettings() {
    $("#settings").slideDown();
}

现在，出于任何原因，当我点击按钮时，它会打开div并再次关闭它。我发现这非常奇特。此时，我不知道该怎么做。我已经阅读了两个成功回答的Stack Overflow问题，我甚至尝试复制并粘贴确切的代码而没有结果。

这些文章：

jQuery: Hide popup if click detected elsewhere

How do I make this popup box disappear when I click outside?

我在这一点上非常困惑，我不知道该怎么做。对此有任何帮助非常感谢。

最诚挚的问候，以马内利

编辑：好的。看来我忘记了我的CSS样式，所以这里是：

div#settings {
display: none;
position: absolute;
right: 20px;
bottom: 50px;
background-color: #9E9E9E;
width: 200px;
box-shadow: 2px 2px 10px #000000;
border-style: solid;
border-color: #000000;
border-width: 1px;
color: #551A8B;
padding-left: 15px;
}

Answer 1

$("html").click(function(){
    $("#settings").slideUp()
});

似乎在click #settings-button之后调用.slideUp()，在.slideDown()之后调用html，每次点击document元素$(document).one("click", fn)

它应该被正常隐藏，当你点击按钮时，它向上滑动。当您在打开时点击外面的任何地方时，它会滑动程。

尝试在.slideDown()回调时添加#settings，点击div之外的document <{1}} {/ 1}}

尝试在#settings内替换.on("click")代替onclick;缓存html选择器;从#settings

中调用.slideDown()，.slideUp()

＆＃13;

openSettings

＆＃13;

$(function() {

  var elem = $("#settings");

  function openSettings() {
    elem.is(":hidden") 
    ? elem.slideDown(function() {
        $(document).one("click", function(e) {
          elem.slideUp()
        })
      }) 
    : elem.slideUp();
  }

  $("#settings-button").on("click.show", openSettings);

  elem.click(function(e) {
    e.stopPropagation();
  });

});

＆＃13;

body {
  width: 100%;
  height: 100%;
}
div#settings {
  display: none;
  position: absolute;
  right: 20px;
  bottom: 50px;
  background-color: #9E9E9E;
  width: 200px;
  box-shadow: 2px 2px 10px #000000;
  border-style: solid;
  border-color: #000000;
  border-width: 1px;
  color: #551A8B;
  padding-left: 15px;
}

＆＃13;

Answer 2

我认为您在错误的元素上使用stopPropagation，它应该是#settings-button：

$("#settings-button").click(function(e) {
  e.stopPropagation();
});

Example

单击打开按钮时，Div将打开和关闭

2 个答案: