Question

我认为我的问题非常简单，但我不知道为什么我的jquery不起作用。我只想让导航从顶部滑入。再次单击navIcon按钮，导航应隐藏，按钮的类名应再次更改。

这是我的代码： jsfiddle

HTML

<div class="navIcon navIconInactive"></div>
<div id="navWrapper"></div>

CSS

.navIconInactive {
position: fixed;
z-index: 4;
width: 36px;
height: 34px;
top: 20px;
right: 25px;
cursor: pointer;
background: green;
}
.navIconActive {
position: fixed;
z-index: 4;
width: 36px;
height: 34px;
top: 20px;
right: 25px;
cursor: pointer;
background: red;
}

#navWrapper {
position: fixed;
top: -70px;
height: 70px;
width: 100%;
background: #333;
z-index: 2;
}

JQUERY

$('.navIconInactive').click(function() {
    $('#navWrapper').animate({
        top: '0'
    }, 250, function() {
        // Animation complete.
    });
    if ( $('.navIcon').hasClass('navIconInactive') ) {
            $(this).removeClass('navIconInactive').addClass('navIconActive');
        }
});

$('.navIconActive').click(function() {
    $('#navWrapper').animate({
        top: '-70'
    }, 250, function() {
        // Animation complete.
    });
    if ( $('.navIcon').hasClass('navIconActive') ) {
            $(this).removeClass('navIconActive').addClass('navIconInactive');
        }
});

Answer 1

试试这个：动画结束后你必须removeClass / addClass，因此把它放在动画函数中。
当您使用click选择器绑定div活动/非活动class事件时。但是，当您添加/删除类时，这些类选择器是动态可用的，因此使用.on()绑定点击事件，就像我们对动态元素一样。

$(function(){
    $(document).on("click",'.navIconInactive',function() {
       var navIcon = $(this);
       $('#navWrapper').animate({
                top: '0'
        }, 250, function() {
           $(navIcon).removeClass('navIconInactive').addClass('navIconActive');
        });
    });


   $(document).on("click",'.navIconActive',function() {
        var navIcon = $(this);
        $('#navWrapper').animate({
            top: '-70'
        }, 250, function() {      
           $(navIcon).removeClass('navIconActive').addClass('navIconInactive');
        });
    });
});

<强> Demo

Answer 2

动画后执行此操作。您只需将$(this)更改为$('.navIcon')

$('.navIconInactive').click(function() {
    $('#navWrapper').animate({
        top: '0'
    }, 250, function() {
        // Animation complete.
        if( $('.navIcon').hasClass('navIconInactive') ) {
            $('.navIcon').removeClass('navIconInactive').addClass('navIconActive');
        }
    });
});

$('.navIconActive').click(function() {
    $('#navWrapper').animate({
        top: '-70'
    }, 250, function() {
        // Animation complete.
        if ( $('.navIcon').hasClass('navIconActive') ) {
            $('.navIcon').removeClass('navIconActive').addClass('navIconInactive');
        }
    });

});

Demo

Jquery更改类在动画后不起作用

2 个答案: