1

I have a page set up nicely (JSFiddle) with a photo and expanding bio when you click the persons name (e.g. "Jane Doe"). I'm using an equal heights plugin to keeps the columns to match each other, e.g.

<span class="views-bio-left equal-title" style="height: 180px; overflow: auto;">
content
</span>
<span class="views-bio-right equal-title" style="height: 180px; overflow: auto;">
content
</span>

So far I've got the expanding part working and the equal heights part working when the page loads. However when you click the person's name, all of the people's bio's expand when I'd like only the one associated with each person at a time.

Example of text in question for each person that gets expanded is:

<span class="field-group-format-wrapper" style="display: none;">
<p>Ad antehabeo autem consequat fere jus letalis nisl patria tego. Ad aptent esse eum fere ibidem iusto pecus.</p>
</span>

I'm using this code for that:

// Equal heights for expanded text.
// This one expands all hidden text spans, not just the indivudial span being expanded
$(window).click(function () {
    $(".field-group-format-toggler-abstract").each(function () {
        $(".equal-title").css('height','auto').equalHeights();
    });
});

I figured using .each(function () would help focus on only expanding the associated hidden text and not all of them on the page but that's not the case so I am at a loss.

4

1 回答 1

1

利用

$(".field-group-format-toggler-abstract").next(function () {

代替：

$(".field-group-format-toggler-abstract").each(function () {

http://jsfiddle.net/EuLHd/

以及为什么会这样：

.each() 遍历一个 jQuery 对象，为每个匹配的元素执行一个函数，因此所有匹配类名的元素都会被触发。

.next() 获取匹配元素集中每个元素的紧随其后的兄弟。如果提供了选择器，则仅当它与该选择器匹配时，它才会检索下一个兄弟。（所以基本上它会抓取与您的类选择器名称匹配的元素组中的第一项）。

新小提琴： http: //jsfiddle.net/UcjYT/这个将容纳可变数量的项目

本质上，我们正在获取选择器检索到的项目数

$(".equal-title").length;

然后我们执行一个 for 循环来遍历项目，同时，.slice() 方法应用于选择器，slice 方法允许您从选择器中获取匹配的项目范围，所以我们正在抓取两个选择器匹配被点击的项目，然后应用 equalHeight 方法。

$(".equal-title").slice(i, i+2).css('height', 'auto').equalHeights();

希望这可以帮助！

于 2013-05-07T23:29:51.780 回答