打开和关闭不同层次上点击一个子菜单

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");  
});

我的解决方案仅适用一半，还有很多影响，我不想。子菜单上下滑动bevore他们打开和其他丑恶的东西。

我知道我的jQuery是一个烂摊子，但我仍然在学习。因此，任何人可以帮助我吗？

另一个问题：那问题一定是相当普遍的。这将是通过搜索引擎找到解决的正确短语？我找不到任何东西，帮助我。

谢谢！

Answer 1

如果你不喜欢它，你将节省大量的代码：d为1日。代码需要找到，如果元素被隐藏，并选择功能以显示或隐藏。经过1个步骤中，我们阻止执行功能。为什么u使用return false？停止执行代码，而不该脚本会隐藏/显示不仅孩子元素，在视觉上会发生错误。

我希望我帮助的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>

一些额外的：

拨弄追加箭头（：d）的xD https://jsfiddle.net/5pxwy0od/

我用兄弟姐妹，和身体点击becouse箭头（元素）后HTML（节点列表）创建了准备，所以元素是不可见的jQuery，每次当我们添加一些元素（元素节点）后，DOM渲染，我们必须使用身体选择。像那样：

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

Answer 2

我还添加了箭头指示开启/关闭的状态。我的整个代码存储在小提琴，这里只是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/

希望这是确定的，反正它的工作原理。 ;）