使用jQuery在事件上切换CSS类

Question

我有一块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的折叠控件 。 行为正常。 我现在正尝试将glyphicon从右更改为下。 为此，我有以下几点：

$('#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...'); })
;

不幸的是，这是行不通的。 我的console.log语句正在打印undefined 。 但是，如果我执行console.log($toggle)我会看到一个元素。 我想念什么？

谢谢！

Answer 1

更改

$('#group > .toggle');

至

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

我没有看到ID设置为group任何内容。

另外， .toggle不是父级的直接子级，因此请删除> 。

Answer 2

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