使用 nextUntil 的 jQuery 手风琴答案

【问题标题】：jQuery accordion using nextUntil使用 nextUntil 的 jQuery 手风琴
【发布时间】：2021-04-07 07:49:58
【问题描述】：

我使用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> 标签。

【问题讨论】：

标签： jquery accordion slidetoggle nextuntil

【解决方案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>

【讨论】：