javascript - 我可以将一个函数变成一个变量以减少我的代码吗(请调试 JavaScript 代码)

Question

您好，我一直在一遍又一遍地思考如何简化这个 Java 脚本代码。

我是 JavaScript 的新手，我不知道还能去哪里。我正在做一个导航，当我点击一个按钮时，它将动画化为 transform:translateX(0); from transform:translateX(-98%); 作为一个类.

如果您将鼠标悬停在 div .main-navigation 上，我也会这样做，它会相应地来回滑动。我有它，如果它打开到关闭状态，mouseover 将滑动导航，但当它关闭打开时我不能这样做。如果 .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');
        };
    });
});

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

My CodePen Example

Answer 1

没关系，我已经弄清楚了，我使用了 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');
        }
    });
}

});

我不确定这是否是实现我的目标的最干净的方法，但它有效，我很高兴。

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