Multi level dropdown

JavaScript
1

Hi I am developing a jquery script to handle multiple clicks on dropdown elements.

The script add and remove a class based on a data attribute and remove it when clicked outside.

The problem is this:

If i nest another element with a class to toggle and I click on it, the parent element get it’s class removed. I want the parent to keep it’s class and apply the class the child needs.

How can I prevent this?

I have just one rule, Absolutely no use of the e.stopPropagation().

I have seen lot’s of snippets and script with the stopPropagation method, and it’s risky if I have other scripts interacting with the element.

Thanks in advance for your help.

This is the demo:

2

You added your ‘click’ event listener on the entire document, which is overkill. You might want to add an event listener to a particular class or few classes instead to get more targeted behavior.

https://api.jquery.com/click/