So I am currently working on a Dropdown-List menu and as you may suspect... I am very newbie. I wish to make it so that when I have the Dropdown-menu opened, so that when I hover or click outside of it, the dropmenu should hide again. How is it possible to make this work? I have tried a few tips here on Stackoverflow but none which are working for me sadly.
As you can see below, it is an onclick="toggle_visibility"
for my dropdown menu called (ID) "droppy" It has a default display:none;
so when I click on the <a>
tag it opens the "droppy"/dropdown-menu. But what if it should close again when either hovering outside or simply clicking outside. Both solutions is alright for me =) If someone knows, please help. Thanks!
function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; }
#nav #droppy{ position:relative; left:90px; top: 17px; width: 225px; height: 150px; display:none; font-size: 25px; background-color: #304749; border-bottom: 1.6px solid black; }
<div id="nav"> <div id="fall"> <a href="#" ="javascript:void(0)" onclick="toggle_visibility('droppy');">Menu</a> </div> <div id="droppy"> <a href="airplanes">Våra Flygplan</a> </div> </div>
See below code. Added click event to open menu and mouseout event to hide.
$('#fall a').mouseout(function() { $('#droppy').hide(); }).click(function(){ $('#droppy').show(); });
#nav #droppy{ position:relative; left:90px; top: 17px; width: 225px; height: 150px; display:none; font-size: 25px; background-color: #304749; border-bottom: 1.6px solid black;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="nav"> <div id="fall"> <a href="#" ="javascript:void(0)">Menu</a> </div> <div id="droppy"> <a href="airplanes">Våra Flygplan</a> </div> </div>
See this code, I have used hover event
/* $( "#menu" ).hover( function() { $( "#droppy" ).show(); }, function() { $( "#droppy" ).hide(); } ); */ $("#menu").on("click",function(){ $( "#droppy" ).show(); }); $( "#droppy" ).hover( function() { }, function() { $( "#droppy" ).hide(); } );
#nav #droppy{ position:relative; left:90px; top: 17px; width: 225px; height: 150px; display:none; font-size: 25px; background-color: #304749; border-bottom: 1.6px solid black;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="nav"> <div id="fall"> <a href="#" ="javascript:void(0)" id="menu">Menu</a> </div> <div id="droppy"> <a href="airplanes">Våra Flygplan</a> </div> </div>
<div id="parent_div">
<div id="drop_down">
<ul>
<li>your_info</li>
</ul>
</div>
</div>
<script type="application/javascript">
//close on hover outside #drop_down effect
$(document).on("mouseleave", "#drop_down", function() {
$("#drop_down").css("display", "none");
});
//close on click outside #drop_down effect
$(document).on("click mouseup", function(e) {
if($(e.target).closest("#drop_down").length === 0) {
$("#drop_down").css("display", "none");
}
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.