使用 jQuery 在事件上切换 CSS 类

Toggle CSS Class on Event with jQuery

本文关键字：CSS jQuery 事件 使用      更新时间：2023-09-26

我有一个看起来像这样的HTML块：

<div data-toggle="collapse" data-parent="#groupOptions" data-target="#group" aria-expanded="true" aria-controls="group" class="collapsable-group-header">
  <h3><span class="glyphicon glyphicon-chevron-right toggle"></span> Group</h3>
</div>

此 HTML 正在使用 Bootstrap 的折叠控件。该行为工作正常。我现在正在尝试将字形从右到下更改。为此，我有以下几点：

$('#group')
  .on('show.bs.collapse', function () { 
    var $toggle= $('#group > .toggle');
    $toggle.removeClass('glyphicon-chevron-right');
    $toggle.addClass('glyphicon-chevron-down');
    console.log($toggle.html());
  })
  .on('hide.bs.collapse', function() { alert('hiding...'); })
;

不幸的是，这是行不通的。我的控制台.log语句正在打印undefined.然而，如果我这样做console.log($toggle)我会看到一个元素。我错过了什么？

谢谢！

更改

$('#group > .toggle');

自

$('[data-target=#group] .toggle');

我没有看到任何将 id 设置为 group 的内容。

另外，.toggle不是父母的直系孩子，所以摆脱>。

jQuery 返回的结果是一个数组。使用 $toggle[0].removeClass...相反。

相关文章：