jquery - jquery 的 slideToggle 函数与 span 和 div 的行为是否不同？

Question

我正在研究 slideToggle 功能。如果我最初使用 span 标签隐藏我的内容，并且在单击该 span 的父级时，我会触发 click 事件并在其中调用 slide Toggle。结果不正确。跨度向下滑动并立即向上滑动。但是，如果我使用 div 而不是 span，则 slideToggle 可以正常工作。有谁知道为什么这种带有跨度的奇怪行为？

Answer 1

默认情况下，span具有内联布局特征，而div在块中布局。在幕后，span元素display: inline在其 CSS 声明中，而div元素的样式是display: block. 实际上，如果您span在页面上放置两个没有样式的元素，它们将彼此相邻出现，而两个div元素将出现在彼此下方。更多关于 CSSdisplay属性的信息可以在MDN上找到。

slideToggle将为元素的属性设置动画width，然后在和原始状态display之间切换其属性。none这不适用于内联元素，因为该width属性不适用于它们的样式。自己试试吧！

#test {
    display: inline; // Try switching this to block
    width: 100px; // This only works for block elements
    background: red; // Make the change visible
}

所以真的，没有什么错span，这完全是关于如何应用样式。如果你想给一个内联元素一个宽度，你可以使用display: inline-block：

#test {
    display: inline-block; // Layout inline with other content as one block
    width: 100px; // This works!
    background: red;
}