javascript - 如何使用按钮切换嵌套列表

Question

我创建了一个带有嵌套的列表并为每个父级添加了一个按钮 <li>元素。该列表如下所示:

$("#pr1").append("<button id='bnt-cat13' class='buttons-filter'>expnd1</button>");
$("#pr2").append("<button id='bnt-cat13' class='buttons-filter'>expnd2</button>");
$("#pr3").append("<button id='bnt-cat13' class='buttons-filter'>expnd3</button>");

$(document).ready(function() {
  $("button").click(function() {
    $('li > ul').toggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="categories">
  <li>1</li>
  <li class="parent" id="pr1">2
    <ul class="children">
      <li>2.1</li>
    </ul>
  </li>
  <li>3</li>
  <li class="parent" id="pr2">4
    <ul class="children">
      <li>4.1</li>
      <li class="parent" id="pr3">4.2
        <ul class="children">
          <li>4.2.1</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>5</li>
</ul>

但是这个切换所有列表，而不是只切换单独的嵌套列表？ 如何仅显示/隐藏单击按钮的单独嵌套列表？ 提前致谢。

Answer 1

至于主要问题 - 而不是每个 li > ul 元素，您只需要 toggle 之前的 ul 元素一个按钮。所以你应该使用 .prev()

$("button").click(function() {
  $(this).prev().toggle();
});

$("#pr1").append("<button id='bnt-cat131' class='buttons-filter'>expnd1</button>");
$("#pr2").append("<button id='bnt-cat132' class='buttons-filter'>expnd2</button>");
$("#pr3").append("<button id='bnt-cat133' class='buttons-filter'>expnd3</button>");

$(document).ready(function() {
  $("button").click(function() {
    $(this).prev().toggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="categories">
  <li>1</li>
  <li class="parent" id="pr1">2
    <ul class="children">
      <li>2.1</li>
    </ul>
  </li>
  <li>3</li>
  <li class="parent" id="pr2">4
    <ul class="children">
      <li>4.1</li>
      <li class="parent" id="pr3">4.2
        <ul class="children">
          <li>4.2.1</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>5</li>
</ul>

---

您的代码还有另一个问题需要解决 - 每个按钮都有相同的 id 属性 (bnt-cat13)。
The id global attribute defines a unique identifier (ID) which must be unique in the whole document.