如何將下拉菜單添加到另一個下拉菜單？

Question

我想創建一個 class 以向菜單添加下拉菜單，即使在其他下拉菜單中也是如此。 我幾乎做到了，但是有一個問題，當我嘗試關閉內部下拉菜單時，外部下拉菜單也會關閉。

當您單擊輔助下拉菜單時，第一個下拉菜單也將關閉。 我應該怎么做才能解決這個問題？

 $(".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

主要問題是因為該事件正在向上傳播 DOM，因此盡管您單擊以切換子下拉列表，但該事件被父級捕獲，然后切換並隱藏。 要解決此問題，請修改您的點擊處理程序 function 以接收事件作為參數，然后對其調用stopPropagation() 。

另外，請注意，您不需要在此處使用each() ，因為 jQuery 將遍歷集合中的所有元素並將事件分配給它們。 此外，您可以通過使用toggleClass()大量簡化代碼。

最后，隱藏/顯示切換下拉菜單的子div而不是更改其高度會更好。 此方法允許您執行更多不同的動畫以將內容從隱藏過渡到可見，並且還可以防止由於字體大小或縮放級別的更改而導致文本被剪切的問題。

這是一個工作版本：

 $(".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>