单击打开和关闭子菜单的不同级别

Question

我有一个无法更改的预制菜单。菜单由三个级别的嵌套列表组成。我只想打开单击父元素的那部分。

这是我的HTML：

  <ul>
  <li>Coffee</li>
  <li>Tea
    <ul class="sub-menu">
      <li>Black tea</li>
      <li>Green tea
        <ul class="sub-menu">
            <li>From India</li>
            <li>From Philippines</li>
        </ul>
    </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

一开始显示了整个列表，因此我添加了一些代码（jquery 和 CSS）来定位不同的子菜单并关闭它们。


$(".sub-menu").not(".sub-menu > li > .sub-menu").addClass("closed first_level");
$(".sub-menu > li > .sub-menu").addClass("closed second_level");

.closed {display: none !important;}
.opened {display: block !important;}

现在开始和结束：

$( ".first_level" ).parent("li").click(function() {
  $(".first_level").toggleClass("closed opened");
  $(".first_level").slideToggle("slow");
});

$( ".second_level" ).parent("li").click(function() {
  $(".second_level").toggleClass("closed opened");
  $(".second_level").slideToggle("slow");  
});

我的解决方案只成功了一半，还有很多我不想要的效果。子菜单在打开之前上下滑动以及其他丑陋的东西。

我知道我的 jQuery 很乱，但我仍在学习。那么有人可以帮我吗？

另一个问题：这个问题一定很普遍。搜索引擎寻找解决方案的正确短语是什么？我找不到任何对我有帮助的东西。

谢谢！

Answer 1

如果你这样做，你会节省很多代码:D 对于第一。代码需要查找元素是否隐藏，并选择显示或隐藏的功能。第一步后，我们停止执行函数。你为什么使用 return false？在没有该脚本的情况下停止代码执行 hide/show 不仅是子元素，还会发生视觉错误。

希望能帮到你 xD

任何时候你都可以改变动画 xD 我只是放简单的幻灯片 xD

$("li").on('click',function(){
if($(this).find("ul:first").is(":hidden")){
$(this).find("ul:first").slideDown();
return false;
}
else{
$(this).find("ul:first").slideUp();
return false;
}
  });

li ul{
display:none}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul class="sub-menu">
      <li>Black tea</li>
      <li>Green tea
        <ul class="sub-menu">
            <li>From India</li>
            <li>From Philippines</li>
        </ul>
    </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

一些额外的：

Fiddle 带有附加箭头 (:D) xD https://jsfiddle.net/5pxwy0od/

我使用兄弟姐妹，正文点击是因为箭头（元素）是在 html（节点列表）准备好之后创建的，所以每次我们添加时 jquery 的元素都不可见DOM 渲染后的一些元素（元素节点）我们必须使用 body 作为选择器。像那样：

$("body").on('click','.nav_arrow',function(){ 
// function goes here
});

Answer 2

我还添加了箭头来指示打开/关闭的状态。我的整个代码存储在 fiddle 中，如果其他人想使用它，这里只是 jQuery：

$("body").on('click','.nav_arrow',function(){ 
/* alert($(this).closest('ul').html()); */
if($(this).siblings(".sub-menu").is(":hidden"))
   { $(this).siblings(".sub-menu").slideDown(); 
    $(this).addClass("turn"); return false;
}
else{ $(this).siblings(".sub-menu").slideUp(); 
$(this).removeClass("turn"); return false; } 
});

https://jsfiddle.net/rabox66/duty8pcq/28/

希望它没问题，反正它能用。 ;)

单击打开和关闭子菜单的不同级别

open and close different levels of a submenu on click

jquery

nested-lists