单击时打开和关闭子菜单的不同级别-解网

问：

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

这是我的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一团糟，但我仍在学习。那么有人可以帮我吗？

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

谢谢！

jQuery 嵌套列表

如果你这样做，你会节省很多代码: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/

我使用兄弟姐妹，并且 body click becouse arrows（elements）是在 html（node list）准备好后创建的，因此元素对 jquery 不可见，每次我们在 DOM 渲染后添加一些 element（element node）时，我们都必须使用 body 作为选择器。诸如此类：

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

哎呀，我忘了什么。不好意思。当然，每个 <li> 里面都有一个 <a>。否则菜单将毫无用处。;)您的代码仅适用于上下滑动。（Whis已经很不错了！但它会阻止链接工作。你知道如何解决这个问题吗？如果你能再次帮忙，那就太好了！

0赞 Piotr Mirosz 2/1/2019

如果每个 li 里面都有一个 A，你会有一些箭头来滑动它，对吧？？所以只需简单地复制我的代码 xD 将点击名称从 li 更改为“箭头名称”并将 .find（“ul：first”）更改为 .next（'ul'）;

0赞 rabox66 2/1/2019

嗨，我试过了，但不起作用。对不起，我是初学者。;)所以我首先通过jQuery添加了箭头，因为没有。

0赞 rabox66 2/1/2019

谢谢，但不起作用。一定是某处的错误。我做了什么：1）我添加了箭头，因为没有包含箭头。这行得通。$（“li.menu-item-has-children”）.prepend（ “<div class='nav_arrow'></div>” ）;我在这里不引用CSS，因为它不是那么重要。无论如何，它有效。.但是其他东西不起作用。： $（“.nav_arrow”）.on（'click'，function（）{ if（$（this）.next（“ul”）.is（“：hidden”））{ $（this）.next（“ul”）.slideDown（）; return false; } else{ $（this）.next（“ul”）.slideUp（）; return false; } }）;知道错误在哪里吗？谢谢

0赞 Piotr Mirosz 2/2/2019

如果您使用 jQuery 添加元素，而不仅仅是将其作为 html... .nav.arrow 不起作用...becouse 元素不存在...你必须通过身体来做......给我小提琴，我会帮忙的

0赞 rabox66 2/3/2019 #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/

希望没关系，反正它有效。;)

上一个：将多个函数转换为一个在jquery中执行相同操作的函数

下一个：如何使用嵌套的 ul 列表显示/隐藏 div 内容

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

open and close different levels of a submenu on click

评论

评论