How to add dropdown menu to another dropdown?

Question

I want to create a class for adding dropdown to menu even in the other dropdowns. I almost did it, but there is a problem and when I try to close the inner drop-down, the outer drop-down also closes.

When you click on secondary dropdown the first one will also close. What should I do to fix this?

 $(".dropdown").each(function() { $(this).on("click", function() { if ($(this).attr("data-dropdown") == "closed") { $(this).attr("data-dropdown", "opened"); $(this).css({ "height": "auto" }); } else { $(this).attr("data-dropdown", "closed"); $(this).css({ "height": "35px" }); } }) })

 @font-face { font-family: iransans; src: url(font/IRANSansWeb.ttf); } * { padding: 0; margin: 0; font-family: iransans; } html, body { height: 100%; }.menu { position: absolute; left: 0; top: 0; bottom: 0; background-color: burlywood; width: 200px; }.dropdown,.dropdown-child { height: 35px; overflow: hidden; }.dropdown-item { display: block; padding: 6px; }.menu.dropdown-item:hover { background-color: blueviolet; cursor: pointer; color: white; }

 <script src="https://kit.fontawesome.com/91f5230546.js" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <div class="menu"> <div class="menu-item"> <div class="dropdown col-lg-12 col-md-12 col-sm-12 col-12" data-dropdown="closed"> <span class="dropdown-item"> Category <span><i class="fas fa-angle-down"></i></span></span> <div> <div> <span class="dropdown-item">Category</span> </div> <div> <span class="dropdown-item">Category</span> </div> <div> <span class="dropdown-item">Category</span> </div> <div class="dropdown col-lg-12 col-md-12 col-sm-12 col-12" data-dropdown="closed"> <span class="dropdown-item"> Category <span><i class="fas fa-angle-down"></i></span></span> <div> <div> <span class="dropdown-item">Category</span> </div> <div> <span class="dropdown-item">Category</span> </div> <div> <span class="dropdown-item">Category</span> </div> </div> </div> </div> </div> </div> <div class="menu-item"> <span>Category</span> </div> </div>

Answer 1

The main issue is because the event is propagating up the DOM, so although you click to toggle the child dropdown, the event is caught by the parent which then toggles and hides. To fix this problem, amend your click handler function to receive the event as an argument, then call stopPropagation() on it.

Also, note that you don't need to use each() here as jQuery will loop over all elements in the collection and assign the event to them. In addition you can simplify the code massively, just by using toggleClass() .

Finally, it would be much better practice to hide/show the child div of the toggled dropdown instead of changing its height. This method allows you to perform more varied animations to transition the content from hidden to visible, and also prevents issues with text being clipped due to changes in font sizes or zoom levels.

Here's a working version:

 $(".dropdown").on("click", e => { e.stopPropagation(); $(e.currentTarget).toggleClass('open'); })

 @font-face { font-family: iransans; src: url(font/IRANSansWeb.ttf); } * { padding: 0; margin: 0; font-family: iransans; } html, body { height: 100%; }.menu { position: absolute; left: 0; top: 0; bottom: 0; background-color: burlywood; width: 200px; }.dropdown,.dropdown-child { overflow: hidden; }.dropdown>div { display: none; }.dropdown.open>div { display: block; }.dropdown-item { display: block; padding: 6px; }.menu.dropdown-item:hover { background-color: blueviolet; cursor: pointer; color: white; }

 <script src="https://kit.fontawesome.com/91f5230546.js" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <div class="menu"> <div class="menu-item"> <div class="dropdown col-lg-12 col-md-12 col-sm-12 col-12" data-dropdown="closed"> <span class="dropdown-item"> Category <span><i class="fas fa-angle-down"></i></span></span> <div> <div> <span class="dropdown-item">Category</span> </div> <div> <span class="dropdown-item">Category</span> </div> <div> <span class="dropdown-item">Category</span> </div> <div class="dropdown col-lg-12 col-md-12 col-sm-12 col-12" data-dropdown="closed"> <span class="dropdown-item"> Category <span><i class="fas fa-angle-down"></i></span></span> <div> <div> <span class="dropdown-item">Category</span> </div> <div> <span class="dropdown-item">Category</span> </div> <div> <span class="dropdown-item">Category</span> </div> </div> </div> </div> </div> </div> <div class="menu-item"> <span>Category</span> </div> </div>