Question

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

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

1 个答案: