为Burger菜单创建菜单

时间:2018-03-06 14:35:54

标签: jquery html css

仍在使用汉堡菜单。 只是想知道是否有人能看出为什么这个功能不起作用?第一位有效,但是当涉及添加更多类时,它不会。

jQuery(document).ready(function ($) {



let $navToggle = $("#navToggle"),
   $navContainer = $('#burgerNavContent'),
   $navMenu = $(".menu-burgernav-container");

/**
 * Open Nav if(!hasClass['active'])
 * else close Nav
 */

function toggleNav() {
    if (!$navToggle.hasClass('active')) {
        $navToggle.addClass('active');
        $navContainer.addClass('burgerMenuActive');
        $navMenu.addClass('burgerMenuLinkActive');
    } else {
        $navToggle.removeClass('active');
        $navMenu.removeClass('burgerMenuLinkActive');
        $navContainer.removeClass('burgerMenuActive');
        return false;
    }
    toggleNav();
}


    $navToggle.click(function () {
        toggleNav();
        return false;
    });

});

我尝试过添加一个代码片段,但它并没有让我这么做。基本上$ navToggle上的addClass有效,但它不想听$ navContainer或$ navMenu

1 个答案:

答案 0 :(得分:1)

它添加活动类并退出IF条件并再次运行

  

toggleNav()

检查现在有效的$ navToggle类,以便将其删除

function toggleNav() {
if (!$navToggle.hasClass('active')) {
    $navToggle.addClass('active');
    $navContainer.addClass('burgerMenuActive');
    $navMenu.addClass('burgerMenuLinkActive');
    return true;
} else {
    $navToggle.removeClass('active');
    $navMenu.removeClass('burgerMenuLinkActive');
    $navContainer.removeClass('burgerMenuActive');
    return false;
}
toggleNav(); // either remove this , idk why you are calling it
}