如何在 Bootstrap 3.2 中点击 glyphicon 后更改它？

Question

我希望有一个箭头指向右边，让用户可以展开侧边栏，然后将那个图标更改为指向左边。这样，它就会指向左边，以便他们知道如何隐藏侧边栏。然后我想让它恢复到默认状态。

目前我的代码如下：

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

- rb612

---

点击时更改 glyphicon 类。 - sevenseacat

我在JS和JQuery方面是个新手。你说得对，那正是我要做的事情，但我不确定如何编写代码。 - rb612

http://learn.jquery.com/ - omma2289

感谢提供链接，koala_dev。我一定会查看的。我正在考虑集成js.OnClick（），但我不确定如何操作。 - rb612

Answer 1

只需使用：

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

Fiddle示例

- apsdehal

---

Apsdehal，非常感谢您的回答。我在处理这段代码时遇到了问题，因为点击图标后它会消失。 - rb612

Answer 2

尝试

$('#menu-toggle').on('click', function(){
    var iSelector = $(this).find('i:first');
    if(iSelector.hasClass('glyphicon-arrow-right')) {
        iSelector.removeClass('glyphicon-arrow-right')
        iSelector.addClass('glyphicon-arrow-left')
    }
});

小提琴

参考信息：

• 选择器
• on事件
• hasClass函数
• removeClass函数
• addClass函数

- Okky

Answer 3

我猜解决这个常见问题的更好方法是使用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;
    }

以下是旋转 glyphicon 的代码

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

请注意：如果您使用的不是Bootstrap CSS库，则字体和内容可能会有所不同。此外，请注意为面板装饰或使用的类。 参考

- Aamol