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申請您想要初始可見的數據表。