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

【问题标题】：does slideToggle function of jquery behave differently with span and div?jquery 的 slideToggle 函数与 span 和 div 的行为是否不同？
【发布时间】：2012-06-05 13:18:54
【问题描述】：

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

【问题讨论】：

尝试设置jsfiddle 来复制问题。我会大胆猜测它与 jQuery 无关，而是与 CSS 有关。 div 是块元素，而 span 不是，请尝试在 CSS 中将 span 设置为 display: block，看看是否无法解决问题？

标签： jquery dom

【解决方案1】：

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

slideToggle 将为元素的width 属性设置动画，然后在none 和原始状态之间切换其display 属性。这不适用于内联元素，因为 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;
}

【讨论】：