jquery - 使用 nextUntil 的 jQuery 手风琴
问题描述
我使用该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()
像这样使用 Selector:$('.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>
推荐阅读
- javascript - React 钩子从多个子组件更新父状态
- xml - logback.xml 中信用卡的正则表达式替换表达式
- dart - 将对象颤动列表中的所有 int 值相加
- amazon-web-services - 无法使用 Kubernetes 中的默认存储类在 AWS 上创建持久卷
- asp.net-core - 突然导致问题:运行时asp.net core web.config中的重复键错误
- django - Django、docker、PostGIS 中的错误:服务器是否在本地运行并接受 Unix 域套接字“/var/run/postgresql/.s.PGSQL.5432”上的连接?
- python - 如何将模式问题的行添加到python中的列表中
- python - 如何访问视图中的 django 模型字段?
- python - Selenium - Instagram 机器人:点击照片后关注用户
- flutter - ThemeData(primaryColor: Colors.red) 和提供 ColorScheme.primary 有什么区别