jquery - ブートストラップのシェブロン アイコンがオンクリックで変更されないのはなぜですか?

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

動作しませんが、アイコンシェブロンの場所を変更すると動作します:

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