jquery - jqueryのslideToggle関数は、スパンとdivで異なる動作をしますか?

Question

私はslideToggle機能に取り組んでいます。スパンタグを使用して最初にコンテンツを非表示にし、そのスパンの親をクリックすると、クリックイベントが発生し、スライドトグルが呼び出されます。その結果は適切ではありません。スパンがスライドダウンし、すぐにスライドアップします。しかし、span の代わりに div を使用すると、slideToggle は適切に機能します。この種のスパンでの奇妙な動作の理由を知っている人はいますか?

Answer 1

デフォルトでは、ブロック内のレイアウトspanに対して、インライン レイアウトの特性があります。div舞台裏では、span要素はdisplay: inlineCSS 宣言に含まれていますが、div要素は でスタイル設定されていdisplay: blockます。実際には、spanスタイル設定なしで 2 つの要素をページに配置すると、それらは隣り合って表示されますが、2 つのdiv要素は互いの下に表示されます。CSSdisplayプロパティの詳細については、MDNを参照してください。

slideToggle要素のプロパティをアニメーション化し、そのプロパティを元の状態との間でwidth切り替えます。プロパティはスタイルに適用されないため、これはインライン要素では機能しません。自分で試してみてください！displaynonewidth

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