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()可以使切换显示动画化。

$(document).ready(function() {
  $(".parent").click(function () {
    $(".child").children().slideToggle();
  });
});

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