我可以在Div上使用SlideToggle（）並將Display設置為Table-Cell嗎？

Question

在我的頁面中，我有一個div的層次結構設置為display: table with child div設置為display:table-cell 。 我想在給定的單元格上使用slideToggle()來替換它的內容。 我已經讀過slideToggle在none和block之間切換顯示，所以table-cell很可能超出了它的范圍。

首先：這是真的，我不能將slideToggle()與Table-Cell對象一起使用嗎？

其次：在我重新設計所有不使用Table-Cells之前，有沒有可以利用的解決方法？

此代碼段演示了行為（我不喜歡）。 正如您所看到的，不會發生漂亮的滑動切換行為。 相反，單元格短暫出現在前一個應該消失的單元格旁邊，而不是垂直向上滑動。

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style type="text/css">

.container {
    display: table;
}

.cell {
    display: table-cell;
}

    </style>
</head>
<body>

    <button onclick="$('.cell').slideToggle('slow'); return false;" >Click Me</button>
    <div class="container">
        <div class="cell">Here is a test</div>
        <div class="cell" style="display: none">Test2</div> 
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="common/js/jquery-2.1.4.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="common/bootstrap/js/bootstrap.min.js"></script>
    <!-- Other Scripts -->
    <script src="common/bootstrap-select/js/bootstrap-select.min.js"></script>

</body>
</html>

這是我的小提琴： https ： //jsfiddle.net/gdbjohnson/8x8e1gyx/

Answer 1

答案很棘手。 slideToggle將slideToggle將元素置於先前狀態的table-cell元素。 文件說：

將根據需要保存和還原display屬性。 如果元素的顯示值為內聯，則隱藏並顯示，它將再次以內聯方式顯示。 隱藏動畫后高度達到0時，顯示樣式屬性設置為none，以確保該元素不再影響頁面布局。

問題是元素不能正確設置動畫，因為slideToggle嘗試動畫元素的高度和table-cell的高度永遠不會低於內容大小。

所以答案是肯定的，slideToggle將在table-cell但不會對它進行正確的動畫處理。

參考： .slideToggle（）

我可以在Div上使用SlideToggle（）並將Display設置為Table-Cell嗎？

問題描述

1 個解決方案

解決方案1
2 已采納 2015-08-19 04:05:48

我可以在Div上使用SlideToggle（）並將Display設置為Table-Cell嗎？

問題描述

1 個解決方案

解決方案1 2 已采納 2015-08-19 04:05:48

解決方案1
2 已采納 2015-08-19 04:05:48