汉堡菜单图标类切换

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

j查询：

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

}

现在将根据菜单是否打开来切换类。