Question

在我的页面中，我有一个div的层次结构，设置为display: table，子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将对table-cell元素起作用，使元素处于先前状态。文档说：

根据需要保存和恢复显示属性。如果一个元素具有内联的显示值，然后隐藏并显示，它将一次再次显示为内联。隐藏后高度达到0时动画，显示样式属性设置为none以确保元素不再影响页面的布局。

问题是该元素无法正常生成动画，因为slideToggle尝试设置元素的高度，table-cell的高度永远不会低于内容大小。

所以答案是肯定的，slideToggle可以在table-cell上运行，但不会有正确的动画。

参考：.slideToggle()

我可以在Div上使用SlideToggle（）并将Display设置为Table-Cell吗？

1 个答案: