Bootstrap V形图标不会改变onclick，为什么？

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