使用 jQuery 折叠列表

Question

我对 jquery 非常陌生。我正在尝试折叠列表。如果我只在 ul 内部使用，一切都很好，但是有了这个我找不到错误。我需要显示和隐藏（折叠）ul，点击父 td。

我有这个HTML

<td class="parent">Button</td>
<td>
  <ul class="child">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</td>

jQuery

     $('.child').hide();
    $('.parent').click(function() {
        $(this).siblings('.parent').find('ul').slideUp();
        $(this).find('ul').slideToggle();
    });

Answer 1

将 children() 选择器与您真正的父元素和 slideToggle() 一起使用，或者将 $(this) 与 next().children() 和 slideToggle() 一起使用以轻微地动画切换显示。

$(document).ready(function() {
  $("#row").on("click", "td", function() {
    $(this).next().children().slideToggle();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
  <tr id="row">
    <td class="parent">Button</td>
    <td>
      <ul class="child">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </td>
    <tr>
</table>

使用 jQuery 折叠列表

Collapse list with jQuery

jquery

show-hide

collapse