漢堡菜單圖標類切換

Question

我已經使用字體很棒的圖標 fa-bars 和 fa-close 圖標實現了一個漢堡包圖標。

<div class="btn-group box" id="homeNavMenuBox" onclick="toggleMenu(this)">
    <button type="button" class="homenavmenu-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
        <span class="fa fa-bars fa-2x"></span>
    </button>
</div>
<div aria-expanded="true" class="navbar-collapse navbar-responsive-collapse collapse in">
    <ul>
        <li> About </li>
        <li> Info</li>
        <li> Logout</li>
     </ul>
 </div>

現在，單擊 div，切換類以關閉圖標。 單擊關閉圖標將帶回條形圖標，從而給人一種菜單和關閉圖標的感覺。

function toggleMenu(menuClass) {
    jQuery(menuClass).find('span').toggleClass('fa fa-bars fa fa-close');
}

它適用於普通點擊，但是，當用戶快速點擊圖標時，他們的角色會顛倒過來，即當菜單被展開而不是關閉圖標時，我得到菜單圖標，反之亦然

菜單圖標的預期和實際功能

Answer 1

不要在切換時設置圖標 CSS 類，而是將菜單附加到Bootstrap API公開的“顯示”和“隱藏”自定義折疊事件。 這將有助於確保在更改圖標之前完全打開或完全關閉菜單，這應該有助於避免在錯誤的時間出現錯誤的圖標：

HTML：

<div id="someIdentifier" aria-expanded="true" class="navbar-collapse navbar-responsive-collapse collapse in">

jQuery：

$(document).ready(function(){
    var $menu = $('#homeNavMenuBox');
    var $toggle = $menu.find('span');

    // query collapsing element to attach event handlers to
    var $collapse = $('#someIdentifier');

    $collapse.on('shown.bs.collapse', function() {
        toggleMenu();
    });

    $collapse.on('hidden.bs.collapse', function() {
        toggleMenu();
    });

    function toggleMenu() {
        $toggle.toggleClass("fa-bars fa-close");
    }
});

此外，這演示了存儲 jQuery 查詢而不是span而不是在每次切換時執行新的 jQuery 查詢，因為#homeNavMenuBox和span可能會一直存在。

希望這有幫助！

Answer 2

另一種選擇是使用 toggleClass 方法的第二個參數，該方法確定狀態。

function toggleMenu(menuClass) {
var el = jQuery(menuClass).find('span');
el.toggleClass('fa-bars fa-close', function(){
    return el.hasClass('fa-bars');
});

}

現在將根據菜單是否打開來切換類。