添加下拉切换到 ul.submenu

Question

我想为子菜单添加一个简单的切换 class。我不确定代码有什么问题。

$(document).ready(function() {
  $("ul .sub-menu").parent().closest("li").append('<span class="submenu-toggle">▼</span>');
  $("ul .sub-menu").hide();
  $(".submenu-toggle").click(function() {
    $(this).children("ul .sub-menu").toggle();
    $(this).html('▲');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul class="nav-menu">
  <li></li>
  <li>
    <ul class="sub-menu">
      <li>Sub-item</li>
      <li>Sub-item</li>
    </ul>
  <li></li>
</ul>

谢谢！

Answer 1

问题是因为 .sub-menu 是被点击的 span 的兄弟，所以您需要使用 siblings()，而不是 children()。此外，您可以单独使用 closest() 而不是 parent().closest()。试试这个：

$(document).ready(function() {
  $("ul .sub-menu").hide().closest("li").append('<span class="submenu-toggle">▼</span>');

  $(".submenu-toggle").click(function() {
    $(this).siblings(".sub-menu").toggle();
    $(this).html(function(i, h) {
      return h == '▲' ? '▼' : '▲';
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul class="nav-menu">
  <li></li>
  <li>
    <ul class="sub-menu">
      <li>Sub-item</li>
      <li>Sub-item</li>
    </ul>
    <li></li>
</ul>

另请注意，我包含了根据菜单状态切换箭头的逻辑。

添加下拉切换到 ul.submenu

Add dropdown toggle to ul.submenu

html

jquery

toggle