Collapse dropdown menus upon clicking outside of them

Question

Collapse dropdown menus upon clicking outside of them

As a newcomer to coding, I'm trying to figure out how to create multiple dropdown menus where each one collapses when you click outside of it. I've been struggling with the code I wrote for weeks now - I want to have 3 dropdown menus but only one is working properly. Can someone help me fix this issue? Thank you in advance!

    HTML Code

    <div class="container">
      <a href="#home"><span class="Agencymenu">Home</span></a>
      <a href="#news"><span class="Agencymenu">News</span></a>
      <div class="dropdown">
        <button class="dropbtn" onclick="myFunction()">Team 1</button>
        <div class="dropdown-content" id="myDropdown">
          <a href="#"><span class="Agencymenu">Link 1</span></a>
          <a href="#"><span class="Agencymenu">Link 2</span></a>
          <a href="#"><span class="Agencymenu">Link 3</span></a>
        </div>
      </div> 
      <div class="dropdown2">
        <button class="dropbtn2" onclick="myFunction2()">Team 2</button>
        <div class="dropdown-content2" id="myDropdown2">
          <a href="#"><span class="Agencymenu">Link 1</span></a>
          <a href="#"><span class="Agencymenu">Link 2</span></a>
          <a href="#"><span class="Agencymenu">Link 3</span></a>
        </div>
      </div> 
    </div>

CSS Code
   (Same as original)

JS Code:  
(Same as original)

javascript jquery html css

Answer 1

Answer №1

For those who are comfortable with using CSS only and want a dropdown to appear on hover, you can easily implement it by adding the following code:

.dropdown:hover .dropdown-content {display: block}

You can see this in action on this fiddle: https://jsfiddle.net/8n2xrbhq/1/

If you prefer the dropdown to appear on click instead, please let me know in the comments as it will require some JavaScript.

Answer 2

For those who are comfortable with using CSS only and want a dropdown to appear on hover, you can easily implement it by adding the following code:

.dropdown:hover .dropdown-content {display: block}

You can see this in action on this fiddle: https://jsfiddle.net/8n2xrbhq/1/

If you prefer the dropdown to appear on click instead, please let me know in the comments as it will require some JavaScript.

Answer 3

Answer №2

To simplify this task, jQuery could be used; however, here is an example implemented with vanilla JS. The trick is to utilize a common css class for all dropdown elements.

Check out the code snippet on jsFiddle

//HTML
<body>
 <div class="wrapper">
   <div class="Dropdown">
    <div class="Dropdown__btn">Dropdown 1</div>
     <ul class="Dropdown__list">
       <li>Item A</li>
       <li>Item B</li>
       <li>Item C</li>
     </ul>
   </div>
   <div class="Dropdown">
    <div class="Dropdown__btn">Dropdown 2</div>
     <ul class="Dropdown__list">
       <li>Item A</li>
       <li>Item B</li>
       <li>Item C</li>
     </ul>
   </div>
   <div class="Dropdown">
    <div class="Dropdown__btn">Dropdown 3</div>
     <ul class="Dropdown__list">
       <li>Item A</li>
       <li>Item B</li>
       <li>Item C</li>
     </ul>
   </div>
 </div>
</body>

// CSS
.Dropdown__list {
 display: none
}

.is-opened.Dropdown .Dropdown__list {
 display: block
}

//JS

var dropdowns = document.querySelectorAll('.Dropdown');


var closeAllDropdowns = function() {
 dropdowns.forEach( function(current) {
     current.classList.remove('is-opened')
 })
}
var toggleDropdown = function(e) {
 closeAllDropdowns();
 var dropdown = e.currentTarget.parentElement;
 dropdown.classList.toggle('is-opened')
}
for (i = dropdowns.length - 1; i >= 0; i--) {
 dropdowns[i].querySelector('.Dropdown__btn').addEventListener('click', toggleDropdown)
}

Answer 4

To simplify this task, jQuery could be used; however, here is an example implemented with vanilla JS. The trick is to utilize a common css class for all dropdown elements.

Check out the code snippet on jsFiddle

//HTML
<body>
 <div class="wrapper">
   <div class="Dropdown">
    <div class="Dropdown__btn">Dropdown 1</div>
     <ul class="Dropdown__list">
       <li>Item A</li>
       <li>Item B</li>
       <li>Item C</li>
     </ul>
   </div>
   <div class="Dropdown">
    <div class="Dropdown__btn">Dropdown 2</div>
     <ul class="Dropdown__list">
       <li>Item A</li>
       <li>Item B</li>
       <li>Item C</li>
     </ul>
   </div>
   <div class="Dropdown">
    <div class="Dropdown__btn">Dropdown 3</div>
     <ul class="Dropdown__list">
       <li>Item A</li>
       <li>Item B</li>
       <li>Item C</li>
     </ul>
   </div>
 </div>
</body>

// CSS
.Dropdown__list {
 display: none
}

.is-opened.Dropdown .Dropdown__list {
 display: block
}

//JS

var dropdowns = document.querySelectorAll('.Dropdown');


var closeAllDropdowns = function() {
 dropdowns.forEach( function(current) {
     current.classList.remove('is-opened')
 })
}
var toggleDropdown = function(e) {
 closeAllDropdowns();
 var dropdown = e.currentTarget.parentElement;
 dropdown.classList.toggle('is-opened')
}
for (i = dropdowns.length - 1; i >= 0; i--) {
 dropdowns[i].querySelector('.Dropdown__btn').addEventListener('click', toggleDropdown)
}

Answer 5

Answer №3

For a different approach, you may want to check out this example on https://jsfiddle.net/aswin_89/hkred6d7/9/

I made some adjustments to your JavaScript code:

/* With this function, when the user clicks on the button,
the dropdown content will toggle between hiding and showing */
function myFunction() {
   event.target.nextElementSibling.classList.toggle("show2");
}

function clearClasses (target){
  document.querySelectorAll('.dropdown-content.show2').forEach((item)=>{
    if(event.target.nextElementSibling !== item)
      item.classList.remove('show2');
  })
}

// To close the dropdown when the user clicks outside of it
window.onclick = function(e) {
  clearClasses(event.target.nextElementSibling);
}

Answer 6

For a different approach, you may want to check out this example on https://jsfiddle.net/aswin_89/hkred6d7/9/

I made some adjustments to your JavaScript code:

/* With this function, when the user clicks on the button,
the dropdown content will toggle between hiding and showing */
function myFunction() {
   event.target.nextElementSibling.classList.toggle("show2");
}

function clearClasses (target){
  document.querySelectorAll('.dropdown-content.show2').forEach((item)=>{
    if(event.target.nextElementSibling !== item)
      item.classList.remove('show2');
  })
}

// To close the dropdown when the user clicks outside of it
window.onclick = function(e) {
  clearClasses(event.target.nextElementSibling);
}

Collapse dropdown menus upon clicking outside of them

Answer №1

Answer №2

Answer №3

Similar questions

Strip the CSS styling from an image (the CSS being included in the generated code)

Tips for exchanging divs in a mobile view using CSS

Tips for relocating anchor elements to less desirable locations

Encountering limitations in accessing certain object properties with the openweathermap API

What is the best way to extract the innerHTML of every button and exhibit it in a text box?

Over time (a few days), the setInterval function causes the react app to become unresponsive

AngularJS directive for attributes. Steps for adding a second attribute directive during compilation phase

What steps can I take to generate 12 random div elements using jQuery out of a pool of 30?

Modify the bootstrap dropdown background to display only an image

Correcting W3C validation issues is essential

Creating a Node.js asynchronous setup function

Click to Resize Window with the Same Dimensions

Closing the Angularstrap dropdown when clicking elsewhere

Using JQuery to loop through every link in a particular row of a table

Personalize the styling of Material UI Tables - final element customization

Unable to fulfill all the promises in JavaScript

A guide on utilizing the index column for multiple tables using just one statement in the datatable js library

Building secure and responsive routes using next.js middleware

Is it advisable to refrain from loading images in a jQuery ajax request?

Trouble with Unveiling the Secondary Accordion