嵌套表上的jQuery slideDown

Question

当用户单击“显示”按钮时，我希望使嵌套表从顶部向下滑动。但是jQuery的slideDown()函数立即显示表，即使有500 is的动画持续时间，这不是我想要的。我在哪里犯了个错误？我使用的是jQuery 3.4.1和引导带4。

​

$('body').on('click', '.show-me', function (e) {
    var elem = $(this);
    var target_id = $(this).data('show');
    var elements = $(target_id);
    if ($(this)[0].classList.contains('collapsed')) {
            e.preventDefault();
        elements.slideUp(500);
        $(this).removeClass('collapsed');
    } else {
            e.preventDefault();
        elements.slideDown(500);
        $(this).addClass('collapsed');
    }
 })

.hidden {
  display: None;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
  <tr>
    <th>#</th>
    <th>Name</th>
    <th>Surname</th>
    <th>Date of Birth</th>
    <th>Country</th>
    <th>Show</th>
  </tr>
  
  <tr>
    <td>1</td>
    <td>Josh</td>
    <td>Rose</td>
    <td>09.04.1995</td>
    <td>USA</td>
    <td data-show=".show_1" class="show-me">Show</td>
  </tr>
  
  <tr class="hidden show_1">
    <td colspan=99>
      <table class="w-100">
        <tr>
          <th>Mobile number</th>
          <th>Provider</th>
          <th>ID</th>
        </tr>
        
        <tr>
          <td>999 999 999</td>
          <td>XYZ</td>
          <td>1274</td>
        </tr>
        <tr>
          <td>888 888 888</td>
          <td>XYZ</td>
          <td>1111</td>
        </tr>
      </table>
    </td>
  </tr>
  
  <tr>
    <td>2</td>
    <td>Sabine</td>
    <td>Perr</td>
    <td>15.06.1988</td>
    <td>Finland</td>
    <td data-show=".show_2" class="show-me">Show</td>
  </tr>
  
    <tr class="hidden show_2">
    <td colspan=99>
      <table>
        <tr>
          <th>Mobile number</th>
          <th>Provider</th>
          <th>ID</th>
        </tr>
        
        <tr>
          <td>999 999 999</td>
          <td>XYZ</td>
          <td>1274</td>
        </tr>
      </table>
    </td>
  </tr>
  
  <tr>
    <td>3</td>
    <td>Paul</td>
    <td>Koel</td>
    <td>22.07.1999</td>
    <td>England</td>
    <td data-show=".show_3" class="show-me">Show</td>
  </tr>
  
    <tr class="hidden show_3">
    <td colspan=99>
      <table>
        <tr>
          <th>Mobile number</th>
          <th>Provider</th>
          <th>ID</th>
        </tr>
        
        <tr>
          <td>999 999 999</td>
          <td>XYZ</td>
          <td>1274</td>
        </tr>
        <tr>
          <td>888 888 888</td>
          <td>XYZ</td>
          <td>1111</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

​

JSFiddle这里：https://jsfiddle.net/ha6gd53z/3/

Answer 1

slideUp() & slideDown()不会与display: table合作。所以用table包装div (display: block)

工作演示

Answer 2

更改显示:无显示：“隐藏”类的内联块。我更新了小提琴。