Question

当您点击人名时，我有一张page set up nicely（ JSFiddle ），其中包含照片和展开生物（例如＆＃34; Jane Doe＆＃34;）。我使用相同的高度插件来保持列彼此匹配，例如

<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>

到目前为止，我已经让扩展部分工作，并且当页面加载时，相等高度部分工作。但是，当您点击该人的姓名时，当我一次只想要与每个人相关联的人时，所有人的生物都会扩展。

展开的每个人的问题文字示例如下：

<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>

我正在使用此代码：

// 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();
    });
});

我认为使用.each(function ()将有助于只关注扩展相关的隐藏文本而不是页面上的所有隐藏文本，但事实并非如此，所以我不知所措。

Answer 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();

希望这有帮助！

JQuery在单个扩展文本的点击时具有相同的高度

1 个答案: