我能把一个函数变成一个变量来减少我的代码吗（请用JavaScript代码调试）

您好，我一次又一次地绞尽脑汁试图简化这个java脚本代码

我对JavaScript相当陌生，我不知道还能去哪里。 我正在做一个导航，当我点击一个按钮时，它将动画转换：translateX0；来自转化：translateX-98%；作为一个班级

如果你将鼠标悬停在div上，我也会这样做。它会相应地前后滑动。我有它的鼠标将滑动导航，如果它打开关闭状态，但我不能这样做，当它关闭打开。如果.home处于活动状态，则鼠标悬停不会打开或关闭.home，而只会打开菜单

有什么建议吗

$(function(){
    var navToggle = document.querySelectorAll('.nav-toggle');
    var mainMenu = document.querySelectorAll('.main-navigation');

    $(navToggle).on('click', function(){
        if ($(mainMenu).hasClass('close')){
            $(mainMenu).removeClass('close');
            $(mainMenu).addClass('open');
        }else{
            $(mainMenu).addClass('close');
            $(mainMenu).removeClass('open');
        };
        $('.home').toggleClass('hide, toggleAnimate');
        $('.contentWrap').toggleClass('open');
    });

    $(mainMenu).on('mouseenter', function(){
        if ($(mainMenu).hasClass('close')){
            $(mainMenu).removeClass('close');
            $(mainMenu).addClass('open');
        }
        if ($(mainMenu).hasClass('open')){
            $(mainMenu).removeClass('open');
            $(mainMenu).addClass('close');
        };
    });
});

很抱歉，我创建了一个代码笔来向您展示一个非常接近的示例，说明我正在尝试做什么以及正在发生的行为

---

不管我怎么想，我使用JQuery并实现了我的目标。最后我把它改成了这个

$(function(){
homeAnimate();
menuAnimate();
menuAnimate2();
autoAnimateEnter();
autoAnimateExit();

function homeAnimate(){
    $('.nav-toggle').click(function () {
        $('.home').toggleClass('hide, toggleAnimate');
        $('.contentWrap').toggleClass('open');
    });
}

function menuAnimate(){
    $('.nav-toggle').click(function () {
        if ($('.main-navigation').hasClass('close')) {
                $('.main-navigation').addClass('close');
                $('.main-navigation').toggleClass('open');
        }
        if ($('.main-navigation').hasClass('open')) {
                $('.main-navigation').toggleClass('close');
                $('.main-navigation').toggleClass('open');
        }
    });
}

function menuAnimate2(){
    $('.nav-toggle-menu').click(function () {
        if ($('.main-navigation').hasClass('open')) {

        } else {
            $('.main-navigation').addClass('open');
            $('.main-navigation').removeClass('close');
        }
        $('.home').toggleClass('hide, toggleAnimate');
        $('.contentWrap').toggleClass('open');
    });
}

function autoAnimateEnter(){

    $('.main-navigation').mouseenter(function () {
        if ($('.main-navigation').hasClass('close')) {
            $('.main-navigation').removeClass('close');
            $('.main-navigation').addClass('open');
        } else {
            // DO NOTHING
        }
    });
}

function autoAnimateExit(){

    $('.main-navigation').mouseleave(function () {
        if ($('.home').hasClass('toggleAnimate')) {
            // DO NOTHING
        } else {
            $('.main-navigation').removeClass('open');
            $('.main-navigation').addClass('close');
        }
    });
}

})

我不确定这是否是实现我目标的最干净的方式，但它奏效了，我很高兴

如果有人想查看，这是我的代码。

---

您没有在事件处理程序中隔离实例。展示一些html1，标记是怎样的？我以为你在用toggleClass，是吗？