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

小提琴示例

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

小提琴

參考：

• 選擇
• 上
• hasClass
• removeClass
• addClass

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庫，則font-family和內容可能會有所不同。 還要注意裝飾或用於面板的類。

參考