0

I need to use javasript to close a dropdownmenu when click an link. I have a Dropdownmenu thats open with mouse:hover. Now i need a function that close the menu when click some link like "down1" from the menu. But i have no idea how to do.

.dropdown {
  position: relative;
  display: inline-block;
  width: 25%;
}

.gap {
  text-align: center;
  padding: 1em 0em;
  background-color: #f47721;
  margin-top: 6%;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
  border-radius: 2%;
}

.dropbt1 {
  background-color: #f47721;
  color: white;
  padding: 1px;
  font-size: 13px;
  border: none;
  cursor: pointer;
}

.dropdown-content1 {
  display: none;
  position: absolute;
  background-color: #f47721;
  /* min-width: 160px; */
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
  z-index: 1;
}

.dropdown-content1 a {
  color: white;
  padding: 8px 3px;
  text-decoration: none;
  display: block;
}

.dropdown-content1 a:hover {
  background-color: #d86a1e
}

.dropdown:hover .dropdown-content1 {
  display: block;
  width: 100%;
}
<div class="dropdown">
  <div class="gap">
    <h3>Dropdownmenu</h3>

    <button class="dropbt1"><h3>please choose</h3></button>
    <div class="dropdown-content1">
      <a href="#" id="" class="specialLink">down1</a>
      <a href="#" id="" class="specialLink">down2</a>
      <a href="#" id="" class="specialLink">down3</a>
    </div>
  </div>
</div>

I need to use javasript to close a dropdownmenu when click an link. I have a Dropdownmenu thats open with mouse:hover. Now i need a function that close the menu when click some link like "down1" from the menu. But i have no idea how to do.

bruno2000
  • 85
  • 1
  • 7
  • Possible duplicate of [Close the menu on click](https://stackoverflow.com/questions/42201156/close-the-menu-on-click) – Himanshu Nov 01 '18 at 21:59

2 Answers2

0

I have done sample code hope it will help you.

$(document).ready(function(){
 $('.dropdown-content1 a').on('click', function(){
  $('.dropdown-content1').hide();
 });
});
.dropdown {
  position: relative;
  display: inline-block;
  width: 25%;
}

.gap {
  text-align: center;
  padding: 1em 0em;
  background-color: #f47721;
  margin-top: 6%;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
  border-radius: 2%;
}

.dropbt1 {
  background-color: #f47721;
  color: white;
  padding: 1px;
  font-size: 13px;
  border: none;
  cursor: pointer;
}

.dropdown-content1 {
  display: none;
  position: absolute;
  background-color: #f47721;
  /* min-width: 160px; */
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
  z-index: 1;
}

.dropdown-content1 a {
  color: white;
  padding: 8px 3px;
  text-decoration: none;
  display: block;
}

.dropdown-content1 a:hover {
  background-color: #d86a1e
}

.dropdown:hover .dropdown-content1 {
  display: block;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="dropdown">
  <div class="gap">
    <h3>Dropdownmenu</h3>

    <button class="dropbt1"><h3>please choose</h3></button>
    <div class="dropdown-content1">
      <a href="#" id="" class="specialLink">down1</a>
      <a href="#" id="" class="specialLink">down2</a>
      <a href="#" id="" class="specialLink">down3</a>
    </div>
  </div>
</div>
Mehraj Khan
  • 927
  • 6
  • 17
  • Thank you for that code. It's work , but only one time. If try to open the menu again , it will not work. – bruno2000 Nov 02 '18 at 08:39
  • @ bruno2000 onHover it is showing when we mouse out it will hide so no need of js also as like your code itself. – Mehraj Khan Nov 02 '18 at 12:07
0

Here is a vanilla javascript solution, that will work repeatedly. Note that due to the size of the closed menu and the position of the first link, clicking on the top half of the first link will result in the menu immediately re-opening (because the mouse is still hovering over the menu)

document.querySelector('body').addEventListener('click', function(e) {
  var clickedElement = e.target;
  if (clickedElement.classList.contains('specialLink')) {
    var menu = clickedElement.parentElement;
    menu.style.display = 'none';
    menu.classList.remove('touched');
    // then remove the style after giving it a chance to close so hovering will reopen the menu
    setTimeout(function() {
      menu.style = '';
    }, 200);
  }
  if (clickedElement.classList.contains('dropbt1')){
    var menu = clickedElement.nextSibling.nextSibling;
    if(!menu.classList.contains('touched'))
      menu.classList.add('touched');
    else
      menu.classList.remove('touched');
  }
});
.dropdown {
  position: relative;
  display: inline-block;
  width: 25%;
}

.gap {
  text-align: center;
  padding: 1em 0em;
  background-color: #f47721;
  margin-top: 6%;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
  border-radius: 2%;
}

.dropbt1 {
  background-color: #f47721;
  color: white;
  padding: 1px;
  font-size: 13px;
  border: none;
  cursor: pointer;
}

.dropdown-content1 {
  display: none;
  position: absolute;
  background-color: #f47721;
  /* min-width: 160px; */
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.16);
  z-index: 1;
}

.dropdown-content1 a {
  color: white;
  padding: 8px 3px;
  text-decoration: none;
  display: block;
}

.dropdown-content1 a:hover {
  background-color: #d86a1e
}

.dropdown:hover .dropdown-content1, .dropdown-content1.touched {
  display: block;
  width: 100%;
}
.dropbt1{
  padding:0.5em;
  font-size:1em;
}
<div class="dropdown">
  <div class="gap">
    <h3>Dropdownmenu</h3>

    <button class="dropbt1">please choose</button>
    <div class="dropdown-content1">
      <a href="#" id="" class="specialLink">down1</a>
      <a href="#" id="" class="specialLink">down2</a>
      <a href="#" id="" class="specialLink">down3</a>
    </div>
  </div>
</div>
Arleigh Hix
  • 9,990
  • 1
  • 14
  • 31