Multiple dropdowns on the same page

Asked

Viewed 97 times

1

I’m having a problem with the example below. Several jquery dropdowns on the same page, they all open perfectly, but they all open, even when clicked on another dropdown, I wanted only one dropdown to stay open, and when clicked on another, the same to close. And also that it does not close when clicked with the right button inside it.

$(document).on('click',".dropbtn",function(){
  $(this).next(".dropdown-content").toggle( "show" );
});
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    $(".dropdown-content").hide(100);
  }
}
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

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

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #f1f1f1}

.show {display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="dropdown">
<button class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

<div class="dropdown">
<button class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
  
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

jquery

  • "Right click" rsrs

  • @edited dvd... rsrsrs

2 answers

2


The use of .hide() cause conflict. Because when the element receives a .hide(), the class .show will have no effect, because when using .hide() the element receives a style inline stronger than a class in CSS.

The correct thing would be to create another class opposite to .show, that I have named .hide.

I put 2 codes: in pure JS (commented) and jQuery:

$(document).on('click',".dropbtn",function(){
  $(".dropdown-content").not($(this).next(".dropdown-content")).removeClass("show");
  $(this).next(".dropdown-content").toggleClass("show");  
});
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    $(".dropdown-content").removeClass("show");
  }
}

//var drop = document.querySelectorAll(".dropdown-content");
//for(var x=0; x<drop.length; x++){
//   drop[x].oncontextmenu = function(event) {
//      console.log(this.innerHTML);
//      this.classList.add("show");
//   }
//}

$(".dropdown-content").on("contextmenu", function(){
   $(this).addClass("show");
});
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

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

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #f1f1f1}

.show {display:block;}
.hide {display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
  <div class="dropdown-content" class="dropdown-content">
    <a href="#home">Home1</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

<div class="dropdown">
<button class="dropbtn">Dropdown</button>
  <div class="dropdown-content" class="dropdown-content">
    <a href="#home">Home2</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#home">Home3</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
  
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
  <div class="dropdown-content" class="dropdown-content">
    <a href="#home">Home4</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

  • Perfect as always, thanks!

  • I edited your example there, I put a form in the dropdown, I wanted the when clicked on the dropdown with an input, it was already with Focus, and the dropdown did not close when clicking inside the input. I tried to do it with "$('.search-input'). Focus();" inside the click event, works more or less, the Focus goes into action only when closing.

1

Follows:

$(document).on('click',".dropbtn",function(){
  $(".dropdown-content").hide(100);
  $(this).next(".dropdown-content").toggle();  
});
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    $(".dropdown-content").hide(100);
  }
}
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

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

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #f1f1f1}

.show {display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="dropdown">
<button class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

<div class="dropdown">
<button class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
  
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

  • this, but the open dropdown does not close when clicked on itself... and still has the issue of the contextmenu, so that the toggle has no effect when clicked on the right link inside the dropdown.

  • Ahhh, now I get it

  • Just the part of the right button I didn’t get what you expect and what the reason.

  • You know that dropdown menu of Stackoverflow notifications? If you right-click to open a notification in a new tab, it does not close, this is the style I wanted.

  • In another question I asked, about similar menu, only in pure javascript, comrade @dvd presented a good solution, but as I needed to use several dropdowns in the same page, I asked this other question with this dropdown in jquery. https://answall.com/questions/271898/evitar-que-menu-dropdown-feche-com-o-clique-direito-dentro-dele/271935?noredirect=1

  • @Johnquimera but this is the behavior presented, do the test, right click and open a subitem on a new tab, or click with the outline outside the preview area if you do not want the submenu to close when clicking outside of it, remove the event onclick of window

  • I am using firefox quantum 58, here will not.

Show 2 more comments

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.