0

I have dynamic elements with a dropdown menu on each. The dropdown contains unique links, Upon clicking an option button, a dropdown menu appears, based on the element you clicked.

Now I want to hide previously clicked dropdown menu if the user clicks on another dropdown button.

enter image description here

How can I get this done, I have tried a few things based on my knowledge example of what I have down below.

/* TOGGLE DROPDOWN ON CLICK */
$(document).on("click", "#dropdown-toggle", function (event) {
    event.stopPropagation();
    $(this).siblings().toggleClass('show')
});
Freesoul
  • 292
  • 2
  • 12
  • Add `event.stopPropagation()` to the `.dropdown-toggle` click handler. This will stop the click event bubbling up and causing the menu to be hidden again. You could also extend the `if` condition in the `window.click` handler to detect clicks inside the dropdown content as well as the button. Either would work. See the duplicates for more information on the best pattern to use. – Rory McCrossan May 25 '21 at 12:10
  • you need to hide all the dropdown when clicking on outside right? – Deepu Reghunath May 25 '21 at 12:10
  • Oh, Great ! Thanks. – Freesoul May 25 '21 at 12:17

0 Answers0