Javascript 如何在Bootstrap 3.2中单击图示符图标后更改它？

我希望有一个指向右边的箭头，允许用户展开侧栏，然后将该图标更改为指向左边。这样，它就指向左边，这样他们就知道如何隐藏侧边栏了。然后我希望它更改回默认状态

这就是我目前拥有的：

        <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>

试试看

参考：

只需使用：

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

---

我想解决这个常见问题的更好方法是使用CSS的伪类，如

:after

比如说

.panel-heading .accordion-toggle:after {    
        font-family: 'Glyphicons Halflings';
        content: "\e114";
        float: right;
        color: grey;
        transition: transform 0.5s;
        transform-origin: 8px 7px;
    }

下面是旋转字形图标的代码

.panel-heading .accordion-toggle.collapsed:after {
    transform: rotateZ(180deg);
}

请注意：如果您使用的不是引导css库，则字体系列和内容可能会有所不同。还要注意面板上装饰或使用的类别

---

单击即可更改glyphicon类。对于JS和JQuery，我是个傻瓜。你说得对，这正是我必须要做的，但我不知道如何编写代码。谢谢你的链接，考拉·德夫。我一定会检查的。我正在考虑集成js.OnClick（），但我不知道如何实现。Apsdehal，非常感谢您的回答。我在使用这段代码时遇到了问题，因为在单击它之后，glyphicon会消失。

.panel-heading .accordion-toggle.collapsed:after {
    transform: rotateZ(180deg);
}