0

これを始めるために、私がどこから始めたかを説明します。私は最初に次のような設定をしました：

<div class="Q">
    <p><strong>What is an exchange?</strong></p>
    <p class="A">Text goes in here</p>
</div>

これはこのフィドルulで問題なく機能していましたが、または情報を含む回答がいくつかありますtable。はp問題なく非表示になりますが、ulorは非表示になりませんtable。

この回答を書いているときに、 を に変更することにしp class="A"ましたspan。これにより、それらが非表示になりましたが、さらに奇妙な問題が発生しました。質問をクリックすると、すぐに内容が表示されます。次に、もう一度クリックすると、本来のようにスクロールしますが、最後に奇妙なフェード グリッチが発生します。

スパンにする前は上下にうまくスクロールしていましたが、上にスクロールするとゆっくりとグリッチが発生しました。

最初の 8 つの質問は現在設定されているspansので、私が得ている奇妙な効果を見ることができます。その後の質問は、p.

ライブサイトはこちら、ここをクリック。

HTML

<div class="Q">
    <p><strong>What is an exchange?</strong></p>
    <span class="A">Answer goes here</span>
</div>

CSS

/* Q and A Format */

.Q > p > strong {
  cursor: pointer;
  background: #c1c1c1;
  width: 100%;
  display: block;
}

.A {
  display: none;
}

jQuery

$('.Q ').on('click', function() { // Q and A function
    $(this).find('.A').stop(true).slideToggle(500);
});

私はこの機能を何度も使用してきましたが、その動作に少し戸惑っています。

4

1 に答える 1

1

グリッチは2倍です。

切り替えられているのスタイルは、表示されているときのように<span>設定されdisplay: inlineます。<span>aを使用する代わりに、<p>問題を解決する必要があります。( a のデフォルトの表示プロパティは、ブロックである<span>a とは対照的にインラインです。)<p>

次に、<p>ヘッダー テキストが含まれる には が必要margin: 0です。

于 2013-10-30T18:26:44.870 に答える