Question

你好我一遍又一遍地试图简化这个java脚本代码。

我对JavaScript很新，我不知道还有什么地方可以转。我正在进行导航，当我点击一个按钮时，它会从transform:translateX(0);作为一个类动画到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

我可以将函数变成一个变量来减少我的代码（JavaScript Code debug Please）

1 个答案: