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

Fiddle Example

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

Fiddle

参考：

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

以及下面用于旋转字形图标的代码

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

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

Reference

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

3 个答案: