How to avoid dropdown menu to close menu items on clicking inside?

We can use the preventDefault() method to prevent the default behavior of the click event on the dropdown menu. By doing this, the menu items will not close when clicked inside. Additionally, we can add a click event listener to the dropdown menu and set the event.stopPropagation() method to stop the event from propagating to parent elements.

HTML Dropdown

HTML dropdown is a type of form element that allows users to select one option from a list of options. It is created using the "select" and "option" tags in HTML. The "select" tag defines the dropdown container and the "option" tags define the options within the dropdown. To pre-select an option, use the "selected" attribute on the "option" tag. The value of the selected option can be accessed using JavaScript or by using the "name" attribute on the "select" tag.

Approach

• One way to prevent a dropdown menu from closing when clicking inside it is to use the event.stopPropagation() method to prevent the event from bubbling up to parent elements. You can attach this method to the click event of the dropdown menu or its child elements to prevent the menu from closing when clicking inside it −

document.querySelector('.dropdown-menu').addEventListener('click', function(event) {
   event.stopPropagation();
});

• Alternatively, you can use event.preventDefault() to prevent the default behavior of the click event, which can also prevent the menu from closing −

document.querySelector('.dropdown-menu').addEventListener('click', function(event) {
   event.preventDefault();
});

You can also use jQuery to do this −

$(".dropdown-menu").click(function(event){
   event.stopPropagation();
});

It is also important to note that it depends on the framework or library you are using. Some frameworks or libraries may have their own methods for handling click events and preventing them from closing the menu.

Final Code

Here is an example of how to create a dropdown menu that will not close when an item is clicked using JavaScript and HTML −

HTML

<div class="dropdown">
   <button class="dropbtn">Dropdown</button>
   <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
   </div>
</div>

CSS

.dropbtn {
   background-color: #4CAF50;
   color: white;
   padding: 16px;
   font-size: 16px;
   border: none;
}
.dropdown {
   position: relative;
   display: inline-block;
}
.dropdown-content {
   display: none;
   position: absolute;
   background-color: #f1f1f1;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
}
.dropdown-content a {
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {
   display: block;
}
.dropdown:hover .dropbtn {
   background-color: #3e8e41;
}

JavaScript

// Get all the links inside the menu
var dropdownLinks = document.querySelectorAll(".dropdown-content a");

// Add a click event listener to each link
dropdownLinks.forEach(function(link) {
   link.addEventListener("click", function(event) {
      // Prevent the default action of the link (redirecting to the href)
      event.preventDefault();
      
      // Do something else here (e.g. update the page with the link's data)
   });
});

Explanation

In this example, we have created a dropdown menu using HTML and CSS. The menu is hidden by default and is displayed when the user hovers over the button.

In JavaScript, we first get all the links inside the menu using the querySelectorAll() method. Then we loop through all the links and add a click event listener to each one. In the event listener, we prevent the default action of the link (which is to redirect to the link’s href) using the preventDefault() method. This way when user click on the links, it will not close the menu and you can do something else with the links.

You can further enhance the functionality by adding some custom functionality on click event of each link.

Complete Code

<html>
   <style>
      .dropbtn {
      background-color: #4CAF50;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
   }
   .dropdown {
      position: relative;
      display: inline-block;
   }
   .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
   }
   .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
   }
   .dropdown-content a:hover {background-color: #ddd;}
   .dropdown:hover .dropdown-content {
      display: block;
   }
   .dropdown:hover .dropbtn {
      background-color: #3e8e41;
   }
   </style>
   <script>
      // Get all the links inside the menu
      var dropdownLinks = document.querySelectorAll(".dropdown-content a");

      // Add a click event listener to each link
      dropdownLinks.forEach(function(link) {
         link.addEventListener("click", function(event) {
            // Prevent the default action of the link (redirecting to the href)
            event.preventDefault();
            
            // Do something else here (e.g. update the page with the link's data)
         });
      });
   </script>
   <div class="dropdown">
      <button class="dropbtn">Dropdown</button>
      <div class="dropdown-content">
         <a href="#">Link 1</a>
         <a href="#">Link 2</a>
         <a href="#">Link 3</a>
      </div>
   </div>
</html>