汉堡菜单图标类切换

Question

I have implemented a hamburger icon using font awesome icons fa-bars and fa-close icons.

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

Now, On click of the div, toggling the class to close icon. Clicking on Close icon will bring bars icon back thus giving the feeling of menu and close icons.

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

It works fine with normal clicks, however, when user rapidly clicks on icons, their roles are getting reversed, ie when menu gets expanded instead of close icon, I am getting menu icon and vice versa

Expected and Actual functionalities of Menu Icon

Answer 1

Instead of setting the icon CSS classes on toggle, attach the menu to the "shown" and "hidden" custom collapse events exposed by the Bootstrap API . This will help ensure the menu is completely opened or completely closed prior changing the icons, which should help with avoiding the wrong icons appearing at the wrong time:

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

Also this demonstrating storing the jQuery query rather for the span rather than executing a new jQuery query each toggle as both #homeNavMenuBox and the span will likely be present the entire time.

Hopefully that helps!

Answer 2

An other option would be to use the second argument for the toggleClass method, that determines the state.

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

}

The class will now be toggled depending on whether the menu is open or not.