Javascript 切换 : Hide div on click of anywhere

Question

我有两个 div。当我点击 3 点 时，div 出现，点击相同的 3 点 时，相同的 div 消失。但是我想隐藏 div，即使我在文档中的任意位置单击也是如此。

有两个圆圈。当我点击一个圆圈时，会显示一个 div，当我点击另一个圆圈时，打开的 div 正在关闭，相关的 div 正在打开，但是当我点击文档的任意位置时，没有一个 div 正在关闭。

$("#discussion_declined , #discussion_pending").click(function() {
  var relatedDiv = $(this).closest('.panel').find('.discussion_edit_div');
  relatedDiv.toggle("fast");
  $('.discussion_edit_div').not(relatedDiv).hide('fast');

});

.discussion_small_round_div {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  position: relative;
  background: #2d3446;
  bottom: 9px;
  left: 15px;
  float: right;
}
.discussion_small_round_div:after {
  content: '\2807';
  font-size: 1.5em;
  color: white;
  position: absolute;
  left: 9px;
  top: 1px;
}
.discussion_edit_div {
  background: #FFFFFF;
  display: none;
  position: absolute;
  right: 35px;
  border: thin #ced0d1 solid;
  z-index: 1001;
  width: 150px;
  box-shadow: 0px 3px 3px #ccc;
}
ul li {
  padding: 5px 15px;
  list-style-type: none;
  color: #838383;
}
ul li:hover {
  background: #eeeded;
  cursor: pointer;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


<div class="panel discussion_panel_div no_background no_box_shadow" style="position: relative;">
  <div class="panel-heading no_border_radius bg-dark set_padding_0">
    <div class="discussion_small_round_div pull-right cursor_pointer" id="discussion_declined"></div>
  </div>
  <div class="discussion_edit_div">
    <ul>
      <li> <span class="glyphicon glyphicon-trash"></span>&nbsp; Replicate</li>
      <li><span class="glyphicon glyphicon-trash"></span>&nbsp; Delete</li>
      <li><span class="glyphicon  glyphicon-ban-circle"></span>&nbsp; Deactivate</li>
    </ul>
  </div>
</div>


<div class="panel discussion_panel_div no_background no_box_shadow" style="position: relative;">
  <div class="panel-heading no_border_radius bg-dark set_padding_0">
    <div class="discussion_small_round_div pull-right cursor_pointer" id="discussion_pending"></div>
  </div>
  <div class="discussion_edit_div">
    <ul>
      <li> <span class="glyphicon glyphicon-trash"></span>&nbsp; Replicate</li>
      <li><span class="glyphicon glyphicon-trash"></span>&nbsp; Delete</li>
      <li><span class="glyphicon  glyphicon-ban-circle"></span>&nbsp; Deactivate</li>
    </ul>
  </div>
</div>

Answer 1

Praveen 的回答很好，但您也可以在不调整 HTML 的情况下实现相同的效果。

只需将其添加到您的 jQuery 中:

$(window).click(function() {
//Hide the menus if visible
$('.discussion_edit_div').hide('fast');
});

$("#discussion_declined , #discussion_pending").click(function(e) {
  e.stopPropagation();
  var relatedDiv = $(this).closest('.panel').find('.discussion_edit_div');
  relatedDiv.toggle("fast");
  $('.discussion_edit_div').not(relatedDiv).hide('fast');

});

一切顺利。

这还实现了另一件事，即一旦您打开了一个 ul，那么您可以通过单击一次直接切换到另一个 ul。在 Praveen 的回答中，您必须单击两次才能打开另一个 ul。

检查链接:https://jsfiddle.net/zfqqqr1c/1/