Bootstrap chevron 图标在点击时不会改变，为什么？

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