Javascript JQuery Datatable在slideDown上断开css

我的问题是，初始div应该隐藏onclick，然后显示另一个datatable，但是css在slideDown之后被破坏

初始数据表

<div id="data_table">
      <table id="table_id" class="table" style="width: 100%;">
        <thead>
          <tr>
            <th>Section Name</th>
            <th>Subject Name</th>
            <th>Level</th>
            <th>Year</th>
            <th>School Year</th>
          </tr>
        </thead>
        <tbody>
          <?php foreach ($class_list as $class) { ?>
          <tr>
            <td>
              <a href="javascript:void(0)" id="class_list_view"  data-id="<?= $class->section_id ?>" >
                 <?= $class->section_name ?>
              </a>
            </td>
            <td><?= $class->subject_name ?></td>
            <td><?= $class->level ?></td>
            <td><?= $class->year ?></td>
            <td><?= $class->schoolyear ?></td> 
          </tr>
          <?php } ?>
        </tbody>
      </table>
    </div>

javascript

 $(document).ready( function () {
    $('#table_id, #table_id_classlist').DataTable({
      "aaSorting": [],
      "scrollX": true
    });
  });

 $('#class_list_view').on('click', function() {
    $('#data_table').slideUp();
    $('#classlist').slideDown();
 });

但是在这个幻灯片上，类列表id的输出是

请帮助我，使onclick的css（我想）不会被破坏。

问题是使元素

显示：无

我建议使用css来创建转换。您会发现这也提供了巨大的性能优势

我没有您的完整代码，但类似于：

 $('#class_list_view').on('click', function() {
    $('#data_table').removeClass( "Active" );
    $('#classlist').addClass( "Active" );
 });

然后使用css设置控件行为的动画：

#data_table,
#classlist {
  max-height: 0;
  opacity: 0;
 -webkit-transition: all ease-in-out 0.2s;
 transition: all ease-in-out 0.2s;
}
#data_table.Active,
#classlist.Active {
  max-height: 1000px;
  opacity: 1;
}

不要忘记将类
Active
应用到您希望最初可见的数据表。
谢谢。顺便说一下，在
#data#u表中有一个额外的点，
@user827391012 My bad。复制和粘贴不仅是我的英雄，也是造成这么多代码错误的原因：）
#data_table,
#classlist {
  max-height: 0;
  opacity: 0;
 -webkit-transition: all ease-in-out 0.2s;
 transition: all ease-in-out 0.2s;
}
#data_table.Active,
#classlist.Active {
  max-height: 1000px;
  opacity: 1;
}