Question

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

Answer 1

默认情况下，span具有内联布局特征，而div是块中的布局。在幕后，span元素在其CSS声明中具有display: inline，而div元素在display: block中设置了样式。实际上，如果您在页面上放置两个span元素而没有样式，它们将彼此相邻，而两个div元素将显示在彼此之下。有关CSS display属性的更多信息，请参见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;
}

jquery的slideToggle函数是否与span和div表现不同？

1 个答案: