Question

我已经创建了一个包含嵌套的列表，并为每个父<li>元素添加了一个按钮。该列表如下所示：

＆＃13;

$("#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();
  });
});

＆＃13;

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

＆＃13;

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

Answer 1

至于主要问题 - 而不是每个li > ul元素，您必须toggle仅ul元素位于button之前。所以你应该使用.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.

Answer 2

将您的功能更改为：

(document).ready(function() {
  $("button").click(function() {
    $(this).parent().children('ul').toggle();
  });
});

如何使用按钮

2 个答案: