我有一个bootstrap可折叠div:
<h3 data-toggle="collapse" data-target="#demo" class="collapse-button" collapse>
simple collapsible
</h3>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates dolor vel tenetur quod voluptate debitis nemo et mollitia dicta voluptas.
</div>
它们没有为您提供任何内置方法,可以根据折叠元素的状态在折叠元素(此处为H3)上设置类。他们的代码只是在显示时在折叠元素上设置了一个“in”类。
我需要做的是创建一个在H3上设置类的通用方法,这样我就可以在它旁边显示正确的图标。
我想我可以使用jQuery来检测子div是否具有“in”类。
到目前为止,我一直没有这样做。
如果我按名称选择子div,它可以工作:
$(function() {
$('.collapse-button').on('click', function(event) {
event.preventDefault();
var isOpen = $('#demo').hasClass('in');
alert(isOpen);
});
});
但是我想把这个处理程序用于任何 H3和子div组合,所以我需要简单地得到对象子进程的div。所以我尝试了像
这样的东西 $(this).find('div').hasClass('in');
无济于事。我在这里缺少什么?
答案 0 :(得分:1)
<div>
不是<h3>
元素的子元素。这是一个兄弟。就您使用的选择器而言,这非常重要。
试试这个:
if($(this).next('.in').length) {
...
}
完整代码如下所示:
$(function() {
$('.collapse-button').on('click', function(event) {
event.preventDefault();
var isOpen = ($(this).next('.in').length) ? true : false;
alert(isOpen);
// Set your class here...
// var $next = $(this).next();
// if($next.hasClass('in')) {
// $next.addClass('your-custom-class');
// } else {
// $next.removeClass('your-custom-class');
// }
});
});
修改强>
我已经编辑了上面的代码,以显示如何根据<div>
是打开还是关闭来添加/删除您要创建的自定义类。
答案 1 :(得分:0)
div是h3的兄弟姐妹。最安全的方式,如果添加其他兄弟姐妹,或者你切换它们是为h3和div组合添加父项以遍历到
<div class="togglewrapper">
<h3 data-toggle="collapse" data-target="#demo" class="collapse-button" collapse>
simple collapsible
</h3>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates dolor vel tenetur quod voluptate debitis nemo et mollitia dicta voluptas.
</div>
</div>
我假设$(this)
是.collapse-button
。单击遍历到父包装器,然后计算div.in
$('.collapse-button').on('click', function(event) {
event.preventDefault();
isOpen = $(this).closest('.togglewrapper').find('div.in').length;
alert(isOpen); // will be 0 or a positive integer, good enough to mean false/true
});