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

Bootstrap如何处理这个问题很有意思。他们有一个面具，你唯一可以点击的就是面具或菜单中的项目。

＆＃13;

ISODate()*1

＆＃13;

ISODate(timestamp)

＆＃13;

$(function () {
  $(".mask").hide();
  $("nav > ul > li > a").click(function () {
    $(this).closest("li").addClass("open");
    $(".mask").show();
    return false;
  });
  $(".mask").click(function () {
    $(this).hide();
    $(".open").removeClass("open");
  });
});

＆＃13;

Answer 2

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/

Javascript切换：点击任意位置隐藏div

2 个答案: