Question

请查看以下代码段 -

HTML

<div class="aclass">
   <h1>This is heading one</h1>
   <p>This is paragraph one, this will be hidden automatically</p>
   <p>This is paragraph two, this will be hidden automatically</p>
   <p>This is paragraph three, this will be hidden automatically</p>
   <h1>This is heading two</h1>
   <p>This is paragraph four, this will be hidden automatically</p>
   <p>This is paragraph five, this will be hidden automatically</p>
</div>

CSS

.aclass p {display:none;}

JS

$(document).ready(function(){
    $('.aclass h1').click(function(){
        $(this).next('p').toggle();
    });
});

当点击h1标签时，此JS代码在h1标签之后切换单个p标签的显示。但我需要切换连续p标签的显示（点击标题1时一到三个）

这样做的jQuery代码应该是什么？

Answer 1

使用.nextUntil：

$('.aclass h1').click(function() {
    $(this).nextUntil('h1', 'p').toggle(); // Selects all p tags after the h1
                                           // stops when it hits an h1
});

DEMO：http://jsfiddle.net/dt7LH/

Answer 2

我为你演奏了小提琴：http://jsfiddle.net/hMsXz/2/

这里是保存点击次数的代码：

 $('.aclass h1').click(function(){
    $(this).nextUntil('h1','p').toggle();
 });

Answer 3

我猜你的意思是展开/折叠点击<p>下方的所有<h1>代码？

使用nextUntil('h1')选择<h1>标记之前的所有同级元素。

Answer 4

使用jQuery 1.4中引入的.nextUntil

$(document).ready(function(){
   $('.aclass h1').click(function(){
       $(this).nextUntil('h1').toggle();
   });
});

如何使用jquery获取连续元素？

4 个答案: