Question

我有一个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');

无济于事。我在这里缺少什么？

Answer 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>是打开还是关闭来添加/删除您要创建的自定义类。

Answer 2

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
 });

jQuery如何判断“this”的孩子是否有课？

2 个答案: