Rishi Rishi - 8 days ago 5
HTML Question

Javascript Toggle : Hide div on click of anywhere

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.

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>




Answer

How Bootstrap handles this is interesting. They have a mask, and the only thing you can click is the mask or the items in the menu.

$(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");
  });
});
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; line-height: 1; box-sizing: border-box;}
body {background-color: #f5f5f5;}
a {text-decoration: none; color: inherit;}

.mask {position: fixed; top: 0; bottom: 0; right: 0; left: 0; z-index: 8;}

nav > ul > li {display: inline-block; position: relative; width: 30%;}
nav > ul > li a {display: block; padding: 5px; border: 1px solid #ccc;}
nav > ul ul {position: absolute; left: 0; right: 0; z-index: 9; display: none;}
nav > ul > li.open > ul {display: block;}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div class="mask"></div>
<nav>
  <ul>
    <li>
      <a href="">Main Item 1</a>
      <ul>
        <li><a href="">Sub Item 1</a></li>
        <li><a href="">Sub Item 2</a></li>
        <li><a href="">Sub Item 3</a></li>
        <li><a href="">Sub Item 4</a></li>
        <li><a href="">Sub Item 5</a></li>
      </ul>
    </li>
    <li>
      <a href="">Main Item 2</a>
      <ul>
        <li><a href="">Sub Item 1</a></li>
        <li><a href="">Sub Item 2</a></li>
        <li><a href="">Sub Item 3</a></li>
        <li><a href="">Sub Item 4</a></li>
        <li><a href="">Sub Item 5</a></li>
      </ul>
    </li>
    <li>
      <a href="">Main Item 3</a>
      <ul>
        <li><a href="">Sub Item 1</a></li>
        <li><a href="">Sub Item 2</a></li>
        <li><a href="">Sub Item 3</a></li>
        <li><a href="">Sub Item 4</a></li>
        <li><a href="">Sub Item 5</a></li>
      </ul>
    </li>
  </ul>
</nav>