jquery - Bootstrap V 形图标在单击时没有改变，为什么？

Question

我有这个部分:

<div id="weather">
<h4><i class="icon-chevron-down"></i> Weather</h4>

和代码:

$('#weather h4').click(function (){
    $('#weather .entries').toggle();
    $('#weather .icon-chevron-down').toggleClass('icon-chevron-right');
});

jsbin1

它不起作用，但如果我改变 icon-chevron 的位置，它就会起作用:

jsbin2

这是一个错误还是我做错了什么？

Answer 1

这个正在工作:

http://jsbin.com/omerep/1/edit

$('#weather h4').click(function (){
    $('#weather .entries').toggle();
    $(this).find('i').toggleClass('icon-chevron-right icon-chevron-down', 200);
});