jQuery Datatable在slideDown

Question

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

初始DataTable

<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>

点击a href ...它会显示此内容并隐藏另一个

<div id="classlist" style="display: none;">
    <table id="table_id_classlist" class="table" style="width: 100%;">
        <thead>
            <tr>
                <th>Student number</th>
                <th>Full name</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        </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();
 });

但是在那个slideDown上，classlist id的输出就是这个

请帮助我，以便点击css（我认为）并没有被打破。

Answer 1

问题是slideUp使元素display:none;

我建议使用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应用于您希望最初可见的数据表。