如何解决jQuery 手风琴使用 nextUntil
我使用 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>
标签。
解决方法
如果您只想隐藏所有其他 <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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。