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的collapse control。行为很好。我现在正试图将右撇子从右向下改变。为此，我有以下内容：

$('#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 ...代替。

使用jQuery在事件上切换CSS类

2 个答案: