JQuery Datatable在slideDown上破css

Question

我的问题是，初始div应该隐藏onclick，然后显示另一个数据表，但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> 

的onclick上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的输出是这样的

请帮助我，使onclick的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申请您想要初始可见的数据表。