汉堡菜单图标类切换答案

【问题标题】：Hamburger Menu Icon class toggling汉堡菜单图标类切换
【发布时间】：2017-02-13 20:36:23
【问题描述】：

我已经使用字体真棒图标 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');
}

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

Expected and Actual functionalities of Menu Icon

【问题讨论】：

标签： jquery twitter-bootstrap hamburger-menu

【解决方案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 可能会一直存在。

希望对您有所帮助！

【讨论】：

不错的答案。 $toggle 和 $span 应该命名相同。
谢谢 Alexander Staroselsky，我会尝试上述方法，只是想知道 homeNavMenuBox 是包含图标按钮的 div，而扩展的菜单位于第二个 div 中，从
。我必须为第二个 div 提供 ID 并将其视为 $menu，我正确吗？
好问题。对于自定义 Bootstrap Collapse API 事件，您可能希望以实际可折叠元素为目标，在您的情况下为 div，类为 collapse。我会在该折叠元素中添加一个id。我已经更新了我的答案。谢谢！
伟大的亚历山大·斯塔罗塞尔斯基。有效。我通过将“shown.bs.collapse”更改为“show.bs.collapse”进行了轻微修改，因为第一个会延迟更改图标（可能正在等待 CSS 转换完成）。
很高兴听到！使用 Bootstrap 时请记住这些自定义事件，让您可以访问其所有 JavaScript 组件中的一些独特事件。我发现它们是不可或缺的。

【解决方案2】：

另一种选择是使用 toggleClass 方法的第二个参数，它决定了状态。

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

}

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

【讨论】：

谢谢 NotABlueWhale。我已经尝试过了，但不知何故，类切换没有正确发生，它保持为“fa fa-bars fa-2x fa-close”。现在，为了使图标大小合适，我添加了 fa-2x
我的错，我已经更新了我的答案，这次应该可以了。