如何在Bootstrap 3.2中单击它时更改glyphicon？

Question

我想要一个指向右侧的箭头以允许用户展开侧边栏,然后将该glyphicon更改为指向左侧.这样,它指向左侧,以便他们了解如何隐藏侧边栏.然后我想让它改回默认状态.

这就是我目前所拥有的:

        <div id="page-content-wrapper">
        <div class='hidden-lg'>
        <div class="content-header">
                <h1>
                <a id="menu-toggle" href="#" class="btn btn-default"><i class="glyphicon glyphicon-arrow-right"></i></a>
                </h1>
        </div>
        </div>

Answer 1

只需使用:

$('#menu-toggle').click(function(){
    $(this).find('i').toggleClass('glyphicon-arrow-right').toggleClass('glyphicon-arrow-left');
});

小提琴示例