Jquery 汉堡菜单图标类切换

我已经实现了一个汉堡包图标使用字体可怕的图标fa栏和fa关闭图标

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

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

它可以正常点击，但是，当用户快速点击图标时，他们的角色会颠倒过来，即当菜单扩展而不是关闭图标时，我会得到菜单图标，反之亦然

---

将菜单附加到“显示”和“隐藏”自定义折叠事件，而不是将图标CSS类设置为“切换”。这将有助于确保在更改图标之前完全打开或完全关闭菜单，这将有助于避免在错误的时间出现错误的图标：

HTML:

此外，这还演示了如何存储jQuery查询，而不是为

span

而不是执行新的jQuery查询，因为

#homeNavMenuBox

和

span

可能会一直存在

---

希望这有帮助

另一个选项是为确定状态的toggleClass方法使用第二个参数

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

}

---

该类现在将根据菜单是否打开进行切换。

回答不错$toggle和$span的名称应该是一样的。谢谢Alexander Staroselsky，我会尝试上面的方法，只是想知道homeNavMenuBox是一个包含图标按钮的div，而展开的菜单在第二个div中，从开始。我得给第二张DIB发身份证，把它看成是菜单，对吗？好问题。对于自定义引导折叠API事件，您可能希望以实际的可折叠元素为目标，在您的示例中，使用类

Collapse

的

div

。我将向该折叠元素添加一个

id

。我已经更新了我的答案。谢谢亚历山大·斯塔罗斯基。成功了。我做了一个小小的修改，将“show.bs.collapse”改为“show.bs.collapse”，因为第一个修改会延迟图标的更改（可能正在等待CSS转换完成）。很高兴听到这个消息！在使用Bootstrap时，请记住这些自定义事件，它允许您访问所有JavaScript组件中的一些独特事件。我发现它们是不可或缺的。谢谢蓝鲸。我已经试过了，但不知何故，类切换并没有正确发生，它保持为“fa-fa-2x fa-close”。现在，为了使图标大小合适，我添加了fa-2xMy bad，我更新了我的答案，这次应该可以了。

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

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