Multiple dropdowns on the same page

Question

Multiple dropdowns on the same page

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

I'm having a problem with the example below. Several dropdowns in jquery on one page, all open perfectly, but all open, even when clicked on another dropdown, I wanted only one dropdown to be open, and that when clicked on another, it would close. Also, it does not close when you right-click 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><divclass="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

asked by anonymous 26.01.2018 / 01:02

2 answers

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><divclass="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>

26.01.2018 / 02:08

Is it possible to edit the name of a project? How to capture value from select as string in PHP?

score 2 · Accepted Answer

Using .hide() causes conflict. Because when the element receives a .hide() , the .show class will not take effect, because when using .hide() the element receives an style inline that has more force than a class in CSS.

The correct one would be to create another class opposed to .show , which I named .hide .

I put 2 codes: in pure JS (commented) and in 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><divclass="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>