使用nextUntil查询手风琴

Question

我已经使用nextUntil()函数创建了一个手风琴。当一个手风琴项目被点击时，我想关闭以前活动的项目。

HTML:

<div class="accordion">
<h3>Item 1</h3>
<p>...</p>
<p>...</p>
<h3>Item 2</h3>
<p>...</p>
<p>...</p>
<h3>Item 3</h3>
<p>...</p>
<p>...</p>
</div>

jQuery:

$(document).ready(function() {
$('.accordion p').hide();
$('.accordion h3').click(function(e) {
e.preventDefault();

var $this = $(this);
$this.nextUntil('.accordion h3').slideToggle('fast');
});
});

我需要如上所示的DOM，并且不能有嵌套的<p>元素。

以下是我迄今为止所做的演示：https://jsfiddle.net/L6q4pako/

我无法正确使用siblings()函数来隐藏以前活动的<p>标记。

Answer 1

如果您只想隐藏所有其他<p>标记，您可以像这样使用:not()选择器：$('.accordion p:not(this)').hide('fast');

$(document).ready(function() {
$('.accordion p').hide();
$('.accordion h3').click(function(e) {
e.preventDefault();

var $this = $(this);
$('.accordion p:not(this)').hide('fast');
$this.nextUntil('.accordion h3').slideToggle('fast');
});
});

h3 { cursor:pointer; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion">
<h3>
Item 1
</h3>
<p>
sdfs dsf sdf sdf sdf sd
</p>
<p>
sdfsdfsd sdf sdf sdf sdf sdf sdf sdf sdf asdfasd fasdf asdf asdf.
</p>
<h3>
Item 2
</h3>
<p>
e449935934b3453495439
</p>
<p>
sdfijdfjjsl slsdlsls ls
</p>
<h3>
Item 3
</h3>
<p>
fsds ss sdfs
</p>
<p>
345345334 sdfsdfsd
</p>
</div>