jQuery:用ToggleClass编写超级菜单

jQuery: Writing Mega Menu with ToggleClass

本文关键字：菜单 ToggleClass jQuery      更新时间：2023-09-26

我正在为我们网站的标题构建一个超级菜单。我使用jQuery来切换Class来设置"抽屉"的活动状态。我是jQuery的新手，还没有接触过很多更复杂的代码结构方法，所以我认为我目前的实现非常乏味/冗长，我想知道是否有更好的方法来切换这个类。请注意（至少在这一点上）我选择了不使用悬停路线，而是使用点击切换。悬停菜单可以是PITA。

这是我的CodePen，里面有所有的东西，包括有问题的jQuery：http://codepen.io/ksherman/pen/YPMXJW

这是jQuery块：

$('#admissions').click(function(){
    $(this).parent().toggleClass('active');
    $('.admissionsNav').toggleClass('active');
    $('.degreesNav, .applyNav, .visitNav, .campusNav, .aboutNav, .searchNav').removeClass('active');
    $('#degrees, #apply, #visit, #campus, #about, #search').parent().removeClass('active');
});
$('#degrees').click(function(){
    $(this).parent().toggleClass('active');
    $('.degreesNav').toggleClass('active');
    $('.applyNav, .visitNav, .campusNav, .aboutNav, .searchNav, .admissionsNav').removeClass('active');
    $('#admissions, #apply, #visit, #campus, #about, #search').parent().removeClass('active');
});
$('#apply').click(function(){
    $(this).parent().toggleClass('active');
    $('.applyNav').toggleClass('active');
    $('.visitNav, .campusNav, .aboutNav, .searchNav, .admissionsNav, .degreesNav').removeClass('active');
    $('#visit, #campus, #about, #search, #admissions, #degrees').parent().removeClass('active');
});
$('#visit').click(function(){
    $(this).parent().toggleClass('active');
    $('.visitNav').toggleClass('active');
    $('.campusNav, .aboutNav, .searchNav, .admissionsNav, .degreesNav, .applyNav').removeClass('active');
    $('#admissions, #degrees, #apply, #campus, #about, #search').parent().removeClass('active');
});
$('#campus').click(function(){
    $(this).parent().toggleClass('active');
    $('.campusNav').toggleClass('active');
    $('.aboutNav, .searchNav, .admissionsNav, .degreesNav, .applyNav, .visitNav').removeClass('active');
    $('#admissions, #degrees, #apply, #visit, #about, #search').parent().removeClass('active');
});
$('#about').click(function(){
    $(this).parent().toggleClass('active');
    $('.aboutNav').toggleClass('active');
    $('.searchNav, .admissionsNav, .degreesNav, .applyNav, .visitNav, .campusNav').removeClass('active');
    $('#admissions, #degrees, #apply, #visit, #campus,  #search').parent().removeClass('active');
});
$('#search').click(function(){
    $(this).parent().toggleClass('active');
    $('.searchNav').toggleClass('active');
    $('.admissionsNav, .degreesNav, .applyNav, .visitNav, .campusNav, .aboutNav').removeClass('active');
    $('#admissions, #degrees, #apply, #visit, #campus, #about').parent().removeClass('active');
});
$('#body').click( function () {
    $('.admissionsNav, .degreesNav, .applyNav, .visitNav, .campusNav, .aboutNav, .searchNav').removeClass('active');
    $('#admissions, #degrees, #apply, #visit, #campus, #about, #search').parent().removeClass('active');
});

将常见元素组合成一个方法：

Javascript：

$('#awesome_ul li a').click(function(){
    $(this).parent().toggleClass('active');
    //hide all
    $('.admissionsNav, .degreesNav, .applyNav, .visitNav, .campusNav, .aboutNav, .searchNav').removeClass('active');
    $('#admissions, #degrees, #apply, #visit, #campus, #about, #search').parent().removeClass('active');
    //show wanted one
    $('.'+$(this).attr('id')+'Nav').toggleClass('active');
});

HTML:

<div class="primary">
        <div class="row collapse">
            <div class="small-12 columns">
                <ul id="awesome_ul">

您可以将它们组合成一个函数，并为所有按钮调用它。

var menus = ['admissions', 'degrees', 'apply', 'visit', 'campus', 'about', 'search'];
function menuClick(e) {
    $(this).parent().toggleClass('active');
    $('.' + e.target.id + 'Nav').toggleClass('active');
    var otherMenus = menus.filter(function (item) { return item !== e.target.id });
    otherMenus.forEach(function (menu) {
        $('.' + menu + 'Nav').removeClass('active');
        $('#' + menu).parent().removeClass('active');
    });
}
menus.forEach(function (menu) {
    $('#' + menu).click(menuClick);
});
$('#body').click( menuClick );

请参阅此代码打开

相关文章：