Question

下面的函数充当了一个slidetoggle手风琴（用于Wordpress帖子的列表），它可以做很多事情，比如切换，添加活动类和“点击”打开的切换div。三个div工作得很好 - .entry-post，.entry-title和.entry-content - 直到......等待...我需要在标记中添加另一个div。

我需要添加的另一个div是发布日期，而第四个div，手风琴动作会中断，因为该函数在确定下一个div时起作用。

如何将此功能考虑在内并忽略我必须在标记中添加的日期div？（我无法将div更改为跨度。）

JS在这里： http://jsfiddle.net/WnpGv/53/

功能：

$(".entry-title").click(function() {
    $this = $(this);
    $content = $this.next(".entry-content");
    if (! $this.is('.active-title')) {
        $('.active-title').removeClass('active-title');
        $this.addClass('active-title');
        $(".entry-content:visible").slideToggle(400);
        $content.slideToggle(400);
    }
});

基本加价：

<div class="entry-post">

    <h2 class="entry-title">Post Title 1</h2>

    <div class="thedate">(publication date)</div> <!--this is the div I added -->

<div class="entry-content">Lorem Ipsum  Lorem Ipsum</div></div>

Answer 1

您无法更改next()，总是查看下一个同级元素：

（next()获取）匹配元素集中每个元素的紧跟兄弟。 如果提供了一个选择器，则仅当与该选择器匹配时，它才会检索下一个兄弟。

[强调我的。]

但是，您可以使用parent()和find()：

$(".entry-title").click(function() { $this = $(this); $content = $this.parent('.entry-post').find(".entry-content"); if (!$this.is('.active-title')) { $('.active-title').removeClass('active-title'); $this.addClass('active-title'); $(".entry-content:visible").slideToggle(400); $content.slideToggle(400); } });

JS Fiddle

已修改使用closest('.entry-post')代替parent('.entry-post')：

$(".entry-title").click(function() { $this = $(this); $content = $this.parent('.entry-post').find(".entry-content"); if (!$this.is('.active-title')) { $('.active-title').removeClass('active-title'); $this.addClass('active-title'); $(".entry-content:visible").slideToggle(400); $content.slideToggle(400); } });

JS Fiddle

参考文献：

next()

parent()

closest()

find()

添加额外的div时，jQuery slidetoggle函数会中断

1 个答案: