I am developing a simple dropdown menu with jquery . When a user press on a trigger area , it will toggle the dropdown area. My question is how to have a click event outside of the dropdown menu so that it close the dropdown menu ?
This question is related to
javascript
jquery
drop-down-menu
You would need to attach your click event to some element. If there are lots of other elements on the page you would not want to attach a click event to all of them.
One potential way would be to create a transparent div below your dropdown menu but above all other elements on the page. You would show it when the drop down was shown. Have the element have a click hander that hides the drop down and the transparent div.
$('#clickCatcher').click(function () { _x000D_
$('#dropContainer').hide();_x000D_
$(this).hide();_x000D_
});
_x000D_
#dropContainer { z-index: 101; ... }_x000D_
#clickCatcher { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; }
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div id="dropDown"></div>_x000D_
<div id="clickCatcher"></div>
_x000D_
Selected answer works for one drop down menu only. For multiple solution would be:
$('body').click(function(event){
$dropdowns.not($dropdowns.has(event.target)).hide();
});
Stopping Event Propagation in some particular elements ma y become dangerous as it may prevent other some scripts from running. So check whether the triggering is from the excluded area from inside the function.
$(document).on('click', function(event) {
if (!$(event.target).closest('#menucontainer').length) {
// Hide the menus.
}
});
Here function is initiated when clicking on document, but it excludes triggering from #menucontainer. For details https://css-tricks.com/dangers-stopping-event-propagation/
how to have a click event outside of the dropdown menu so that it close the dropdown menu ? Heres the code
$(document).click(function (e) {
e.stopPropagation();
var container = $(".dropDown");
//check if the clicked area is dropDown or not
if (container.has(e.target).length === 0) {
$('.subMenu').hide();
}
})
Another multiple dropdown example that works https://jsfiddle.net/vgjddv6u/
$('.moderate .button').on('click', (event) => {_x000D_
$(event.target).siblings('.dropdown')_x000D_
.toggleClass('is-open');_x000D_
});_x000D_
_x000D_
$(document).click(function(e) {_x000D_
$('.moderate')_x000D_
.not($('.moderate').has($(e.target)))_x000D_
.children('.dropdown')_x000D_
.removeClass('is-open');_x000D_
});
_x000D_
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" rel="stylesheet" />_x000D_
_x000D_
<script_x000D_
src="https://code.jquery.com/jquery-3.2.1.min.js"_x000D_
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="_x000D_
crossorigin="anonymous"></script>_x000D_
_x000D_
<style>_x000D_
.dropdown {_x000D_
box-shadow: 0 0 2px #777;_x000D_
display: none;_x000D_
left: 0;_x000D_
position: absolute;_x000D_
padding: 2px;_x000D_
z-index: 10;_x000D_
}_x000D_
_x000D_
.dropdown a {_x000D_
font-size: 12px;_x000D_
padding: 4px;_x000D_
}_x000D_
_x000D_
.dropdown.is-open {_x000D_
display: block;_x000D_
}_x000D_
</style>_x000D_
_x000D_
_x000D_
<div class="control moderate">_x000D_
<button class="button is-small" type="button">_x000D_
moderate_x000D_
</button>_x000D_
_x000D_
<div class="box dropdown">_x000D_
<ul>_x000D_
<li><a class="nav-item">edit</a></li>_x000D_
<li><a class="nav-item">delete</a></li>_x000D_
<li><a class="nav-item">block user</a> </li>_x000D_
</ul>_x000D_
</div>_x000D_
</div>_x000D_
_x000D_
_x000D_
<div class="control moderate">_x000D_
<button class="button is-small" type="button">_x000D_
moderate_x000D_
</button>_x000D_
_x000D_
<div class="box dropdown">_x000D_
<ul>_x000D_
<li><a class="nav-item">edit</a></li>_x000D_
<li><a class="nav-item">delete</a></li>_x000D_
<li><a class="nav-item">block user</a></li>_x000D_
</ul>_x000D_
</div>_x000D_
</div>
_x000D_
Source: Stackoverflow.com