jQuery 在每个上切换? [英] jQuery toggle on each?

问题描述

我使用 jquery 来切换一些段落.只需一段话就很容易，但说我有一个非常通用的设置.第二段最初是用 css 隐藏的.

一些文字
<p>更多的文字</p><a href="#" class="more">阅读更多</a><p>一些文字</p><p>更多的文字</p><a href="#" class="more">阅读更多</a>

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

对 jquery 非常陌生...

解决方案

首先将

标签包裹在 div 中，如下所示:

<p>一些文字</p><p>更多的文字</p><a href="#" class="more">more/less</a>

使用一些 CSS:

.toggleable p {显示:无；}

然后是 jQuery:

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

应该处理它.

当然，还有其他方法可以解决这个问题.也许您可以将带有文本的链接放在 div 之外，然后执行以下操作: $('.more').click( function() { $(this).prev().toggle(); });... 很多方法.看看 jQuery 的 DOM 遍历 方法.

im using jquery to toggle some paragraphs. its pretty easy with just one paragraph but say i have a very generic setup. the second paragraph is initially hidden with 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>

problem is that every time i click one of the "read more" links its shows the every second paragraph. i would just want it to show the second paragraph of the one clicked.

very new to jquery...

解决方案

First wrap your <p> tags in a div like so:

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

With some CSS:

.toggleable p {
  display: none;
}

Then the jQuery:

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

Should handle it.

There are other ways to solve this, of course. Maybe you could put the links outside of the div with the text and then do something like: $('.more').click( function() { $(this).prev().toggle(); } );... Plenty of approaches. Take a look at jQuery's DOM traversal methods.

这篇关于jQuery 在每个上切换?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！