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

通过普通点击可以正常工作，但是，当用户快速点击图标时，他们的角色就会反转，即当菜单扩展而不是关闭图标时，我会看到菜单图标，反之亦然

Expected and Actual functionalities of Menu Icon

Answer 1

不是在切换上设置图标CSS类，而是将菜单附加到＆＃34;显示＆＃34;并且＆＃34;隐藏＆＃34; 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都可能在整个时间内出现。< / p>

希望这有帮助！

Answer 2

另一种选择是使用toggleClass方法的第二个参数来确定状态。

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

}

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

汉堡菜单图标类切换

2 个答案: