jquery - jQuery切换每个？

Question

我使用 jquery 来切换一些段落。只需一段就很容易，但说我有一个非常通用的设置。第二段最初是用 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>

问题是每次我单击“阅读更多”链接之一时，它都会显示每隔一段。我只想让它显示点击的第二段。

对 jquery 来说很新...

Answer 1

<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 遍历方法。

Answer 2

抱歉，我认为我可能搞砸了结构。它的

<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>总是表现得像个专家。第二个<p>和任何后续<p>只显示点击其具体<a>感谢您的快速响应。