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>

在beginnig中将显示整个列表，因此我添加了一些代码（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 对于第一次。代码需要查找元素是否隐藏，然后选择要显示或隐藏的函数。 1个步骤后，我们停止执行功能。您为什么使用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/

我使用同级，并且在html（节点列表）准备好之后就创建了箭头（元素），因此每次在DOM渲染后添加一些element（元素节点）时，jquery中的元素都不可见。必须使用身体作为选择。像这样：

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

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

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

2 个答案: