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 traversal方法。

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>时显示，感谢您的快速回复。

jQuery切换每个？

2 个答案: