Javascript切换：点击任意位置隐藏div [英] Javascript Toggle : Hide div on click of anywhere

问题描述

我有两个div。当我点击 3点时，则出现div，点击相同的 3点时，相同的div正在消失。但我想隐藏div，即使我点击文档中的任何位置。

I have two divs. When I click on 3 dots , then the div is appearing and on clicking the same 3 dots , same div is disappearing. But I want to hide the div, even if I click anywhere in the document.

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

There are two circles. When I click on one circle, then a div is shown and when I click on another circle, then the opened div is closing and related div is opening but when I click anywhere on the document, then none of the div are closing.

$("#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>

推荐答案

Praveen的答案很好，但你也可以在不调整你的HTML的情况下实现同样的目标。

Praveen's answer is nice but you can also achieve the same without tweaking your HTML.

只需将它添加到你的jQuery：

Just add this to your 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。

This achieves one more thing which is that once you have opened one ul, then you can directly toggle to another ul by clicking once. In Praveen's answer you have to click twice in order to open the other ul.

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

这篇关于Javascript切换：点击任意位置隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！