jquery - 切换类 if else css

Question

我希望元素在添加“push”类时固定，然后在删除类“push”时再次变为相对。

这是我的:

$("#menuToggle").click(function() {
    $('.wrapper,header,nav').toggleClass('push', function() {
        if ($('.wrapper,header,nav').hasClass('push')) {
            $('.wrapper').css('position', 'fixed');
        } else {
            $('.wrapper').css('position', 'relative');
        }
    });
});

这是CSS:

.push {
left:200px;
position:fixed;
}
.wrapper {
position:relative;
float:left;
top:0;
width:100%;
z-index:2;
background:#fff;
transition: all 1s ease;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
}
nav {
position:fixed;
line-height:50px;
margin-left:-200px;
z-index:0;
width:200px;
height:100%;
float:left;
color:#fff;
background:#030e17;
}
header {
position:fixed;
z-index:10;
float:left;
width:100%;
background:#fff;
border-bottom:solid 1px #CCC;
transition: all 1s ease;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
}

为什么这不起作用？

谢谢

Answer 1

我假设您不希望所有元素都变成固定，所以您不能将position: fixed 添加到.push CSS类声明。但是，您可以仅对 .wrapper 制定附加规则:

.wrapper {
    position: relative;
}
.wrapper.push {
    position: fixed;
}

你的 JS 会变成:

$("#menuToggle").click(function() {
    $('.wrapper, header, nav').toggleClass('push');
});