在我的页面中，我有一个设置为 display:table 的 div 层次结构，其子 div 设置为 display:table-cell。我想在给定的单元格上 slideToggle() 来替换它的内容。我读过 slideToggle 在 none 和 block 之间切换显示，所以 table-cell 很可能超出了它的范围范围。
首先:我不能对 Table-Cell 对象使用 slideToggle() 是真的吗？
其次:在我重新设计所有内容以不使用 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>
这是我的 fiddle : https://jsfiddle.net/gdbjohnson/8x8e1gyx/
最佳答案
答案很棘手。 slideToggle 将作用于 table-cell 元素，将元素置于之前的状态。文档说:
The display property is saved and restored as needed. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline. When the height reaches 0 after a hiding animation, the display style property is set to none to ensure that the element no longer affects the layout of the page.
问题在于该元素无法正确设置动画，因为 slideToggle 尝试设置元素的高度动画，而 table-cell 的高度永远不会低于内容大小。
所以答案是肯定的，slideToggle 将在 table-cell 上工作，但不，它不能正确地设置动画。
关于jquery - 我可以在显示设置为表格单元格的 Div 上使用 SlideToggle() 吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32086095/