使用 jQuery 折叠列表答案

【问题标题】：Collapse list with jQuery使用 jQuery 折叠列表
【发布时间】：2020-09-01 22:43:02
【问题描述】：

我对 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();
    });

【问题讨论】：

标签： jquery show-hide collapse

【解决方案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>

【讨论】：

谢谢！只有一个问题。我不需要这样的按钮，我需要使用 Text （完成 td）。我的html可以吗？再次感谢
好吧，看起来 jquery 不喜欢直接点击一个 tr 标签，其元素被称为它的类......所以，如果你在其父 ID 上使用 .on( event, selector 方法，它就可以工作。