如何更改可摺疊側邊欄切換圖標

Question

我有一個可摺疊側邊欄的引導頁面。我的可摺疊側邊欄工作正常，但我不知道如何更改切換圖標onclick。

我的要求是：當你點擊切換按鈕時，按鈕圖標應該改變。

這裏是我的代碼：

$("#menu-toggle").click(function (e) { 
    e.preventDefault(); 
    $("#wrapper").toggleClass("toggled"); 
}); 
$("#menu-toggle-2").click(function (e) { 
    $(this).parent().find(".glyphicon-chevron-right").removeClass("glyphicon-chevron-right").addClass("glyphicon-chevron-left"); 

    e.preventDefault(); 

    $("#wrapper").toggleClass("toggled-2"); 
    $('#menu ul').hide(); 
}); 

HTML

<ul class="sidebar-nav nav-pills nav-stacked" id="menu"> 
    <li> 
     <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-dashboard fa-stack-1x "></i></span> Dashboard</a> 
     <ul class="nav-pills nav-stacked" style="list-style-type:none;"> 
      <li><a href="#">link1</a> 
      </li> 
      <li><a href="#">link2</a> 
      </li> 
     </ul> 
    </li> 
    <li> 
     <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span> Shortcut</a> 
     <ul class="nav-pills nav-stacked" style="list-style-type:none;"> 
      <li><a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span>link1</a> 
      </li> 
      <li><a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-flag fa-stack-1x "></i></span>link2</a> 
      </li> 
     </ul> 
    </li> 
    <li> <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-cloud-download fa-stack-1x "></i></span>Overview</a> 
    </li> 
    <li> <a href="#"> <span class="fa-stack fa-lg pull-left"><i class="fa fa-cart-plus fa-stack-1x "></i></span>Events</a> 
    </li> 
    <li> <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-youtube-play fa-stack-1x "></i></span>About</a> 
    </li> 
    <li> <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-wrench fa-stack-1x "></i></span>Services</a> 
    </li> 
    <li> <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a> 
    </li> 
    <li> <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a> 
    </li> 
    <li> <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a> 
    </li> 
    <li> <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a> 
    </li> 
    <li> <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a> 
    </li> 
    <li> <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a> 
    </li> 
    <li> <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a> 
    </li> 
    <li> <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a> 
    </li> 
    <li> <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a> 
    </li> 
    <li> <a href="#"><span class="fa-stack fa-lg pull-left"><i class="fa fa-server fa-stack-1x "></i></span>Contact</a> 
    </li> 
</ul> 
</div> 
<!-- /#sidebar-scroll --> 
</div> 
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <ul class="nav navbar-nav"> 
     <li class="active"> 
      <button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2"> <span class="glyphicon glyphicon-chevron-right"></span> 
      </button> 
     </li> 
    </ul> 
</div> 
<!-- bs-example-navbar-collapse-1 --> 

有誰知道怎麼辦呢？

這裏是我的：Fiddle

Answer 1

$("#menu-toggle").click(function(e) { 
e.preventDefault(); 
$("#wrapper").toggleClass("toggled"); 
    var icon = $(this).parent().find(".glyphicon") 
    if (icon.hasClass('glyphicon-chevron-right')) 
     icon.removeClass('glyphicon-chevron-right').addClass("glyphicon-chevron-left"); 
    else 
     icon.removeClass('glyphicon-chevron-left').addClass("glyphicon-chevron-right"); 
}); 

這樣的事情？