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

By default, most dropdown menus will close when you click inside the menu. However, if you want to prevent the menu from closing when you click inside, you can use the following steps: 
1.Add an event listener to the menu items: Use JavaScript to add an event listener to each menu item in the dropdown menu.
2.Stop event propagation: In the event listener function, use the stopPropagation() method to prevent the event from propagating up the DOM tree.

Here’s an example code snippet that demonstrates how to prevent a dropdown menu from closing when you click inside:

<div class="dropdown">
<button class="dropdown-toggle" data-toggle="dropdown">Menu</button>
<ul class="dropdown-menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>

 

<script>
  // Get all the menu items in the dropdown menu
  var menuItems = document.querySelectorAll('.dropdown-menu li a');

  // Add an event listener to each menu item
  menuItems.forEach(function(item) {
    item.addEventListener('click', function(event) {
      // Prevent the event from propagating up the DOM tree
      event.stopPropagation();
    });
  });
</script>

In this example, we’ve added an event listener to each menu item in the dropdown menu, and used the stopPropagation() method to prevent the event from propagating up the DOM tree. This will prevent the menu from closing when you click inside it, while still allowing you to click on the menu items.