汉堡包菜单图标 class 切换

Question

我已经使用 font awesome 图标 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，切换 class 以关闭图标。单击关闭图标将带回条形图标，从而给人以菜单和关闭图标的感觉。

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

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

Expected and Actual functionalities of Menu Icon

Answer 1

不要在切换时设置图标 CSS 类，而是将菜单附加到 "shown" 和 "hidden" 由 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');
});

}

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

汉堡包菜单图标 class 切换

Hamburger Menu Icon class toggling

jquery

twitter-bootstrap

hamburger-menu