jQuery的slideToggle函數與span和div的行爲不同嗎？

Question

我正在使用slideToggle函數。如果我最初使用span標記來隱藏我的內容，並點擊該跨度的父級，我會觸發單擊事件並調用幻燈片切換。它的結果是不正確的。跨度滑落並立即滑落。但是，如果我使用div而不是span，則slideToggle可以正常工作。 有沒有人知道爲什麼這種奇怪的行爲與span？

Answer 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; 
}