CODEWITHSUNDEEP
javascriptjquerydropdown
Xuzkie
Xuzkie

Reputation: 21

Dropdown-menu to close on click outside / hover outside

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>

Upvotes: 2

Views: 2893

Answers (3)

Onyedikachi Oko - Dexter
Onyedikachi Oko - Dexter

Reputation: 460

<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>

Upvotes: 0

Lalit
Lalit

Reputation: 1369

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>

Upvotes: 2

ganesh deshmukh
ganesh deshmukh

Reputation: 330

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>

Upvotes: 0

Related Questions