Menu
I tried Chinnu R's approach, but when I click anywhere outside the div, menu items not hiding, only when I click inside the div, menu items hide, I want the opposite, ie, click outside div, hide, click inside div, stay put.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("button").click(function() {
$('div#nomore').toggle();
});
$("body > *").not("body > button").click(function(e) {
$('div#nomore').hide();
});
});
</script>
</head>
<body>
<button>MENU</button>
<div id="nomore" style="display:none; background-color:yellow; width:300px;">
<br>
<a href="www.yahoo.com">Yahoo</a><br>
ITEM 2<br>
ITEM 3<br>
ITEM 4<br>
ITEM 5<br>
</div>
</body>
</html>
531
Can you try this,
$(document).ready(function() {
$("button").click(function() {
$('div#nomore').toggle();
});
$("body").click(function(e) {
if(e.target.id == "nomore"){
$('div#nomore').hide();
}
});
});
Other method:
$(document).ready(function() {
$("button").click(function() {
$('div#nomore').toggle();
});
$("body > *").not("body > button").click(function(e) {
$('div#nomore').hide();
});
});
Updated code:
$("body > *").not("body > button").click(function(e) {
console.log(e.target.id);
if(e.target.id=='nomore'){
return false;
}
$('div#nomore').hide();
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
