如何将下拉菜单添加到另一个下拉菜单？

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>