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

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()
});

似乎在 #settings-button 上的 click 之后调用，它在 .slideDown() 之后调用 .slideUp()，每次单击 html 元素时，document.

it is supposed to be hidden normally and when you click the button, it slides up. When you click anywhere outside while it is open, it slide away.

尝试在 .slideDown() 回调中添加 $(document).one("click", fn) 以向上滑动 #settings div 点击 #settings[=34 之外的 document =]

尝试用 .on("click") 代替 html 中的 onclick ；缓存 #settings 选择器；从 openSettings

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

$(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();
  });

});

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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>
<a href="#" class="footer" id="settings-button">Settings</a>

Answer 2

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

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

Example

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

Div opens and closes when open button is clicked on

html

javascript

css

jquery

popup