0

jqueryを使用していくつかの段落を切り替えています。たった1つの段落でかなり簡単ですが、非常に一般的なセットアップがあると言います。2 番目の段落は、最初は css で非表示になっています。

<p>some text</p>
<p>some more text</p>
<a href="#" class="more">read more</a>

<p>some text</p>
<p>some more text</p>
<a href="#" class="more">read more</a>

問題は、「続きを読む」リンクのいずれかをクリックするたびに、1 つおきの段落が表示されることです。クリックした段落の 2 番目の段落を表示したいだけです。

jquery初心者です...

4

2 に答える 2

2

<p>最初にタグを次のdivようにラップします。

<div class='toggleable'>
  <p>some text</p>
  <p>some more text</p>
  <a href="#" class="more">more/less</a>
</div>

いくつかの CSS を使用:

.toggleable p {
  display: none;
}

次に、jQuery:

$('.toggleable a.more').click( function() {
  $(this).siblings('p').toggle();
} );

それを処理する必要があります。

もちろん、これを解決する他の方法もあります。たぶん、リンクを div の外側にテキストとともに配置して、次のようなことを行うことができます: $('.more').click( function() { $(this).prev().toggle(); } );... たくさんのアプローチ。jQuery のDOM トラバーサルメソッドを見てみましょう。

于 2009-11-12T02:50:00.907 に答える
0

申し訳ありませんが、構造を台無しにした可能性があると思います。これは

<p>some text</p> 
<div class="bio> 
<p>some more text</p> 
</div> <a href="#" class="more">read more</a>  

<p>some text</p> 
<div class="bio> 
<p>some more text</p> 
</div> <a href="#" class="more">read more</a>

<p>専門家のようなものとして常に最初に示す必要があります。2 番目<p>以降<p>は、その特定のクリックでのみ表示されます<a>。迅速な対応に感謝します。

于 2009-11-12T03:37:13.290 に答える