Question

我希望在推送＆＃39;课程被添加，然后在课程推动时再次变得相对。被删除了。

这就是我所拥有的：

$("#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

问题是你在toggleclass中有功能。（它不需要这个）

尝试：

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

        if ($('.wrapper,header,nav').hasClass('push')) {
            $('.wrapper').css('position', 'fixed');
        } else {
            $('.wrapper').css('position', 'relative');
        }

});

这是工作演示:(检查元素）;

http://jsfiddle.net/LuwLn962/

Answer 2

我假设您不希望所有元素都变为fixed，因此您无法将position: fixed添加到.push CSS类声明中。但是，您只能为.wrapper制定附加规则：

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

你将成为JS：

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

Answer 3

//用Css切换类

 <!DOCTYPE html>
<html>
<head>
<style>
.left-panel{
height:200px;
background:red;
width:30px;
float:left;

}
.div1{
background:#cecece;
width:25%;
height:300px;
float:left;
top:0;
position:relative;
}
.div2{
background:#333333;
width:68%;
height:300px;
float:left;
top:0;
position:relative;
}


</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".left-panel").click(function(){

if($( ".div1" ).css( "display")=="block")
{

$(".div1").hide("slow"); 
$( ".div2:visible" ).animate({

    width: "+=350px"

}, "slow" );

}
else
{

$(".div1").show("slow");
$( ".div2:visible" ).animate({

    width: "-=350px"

}, "slow" ); 

}

  });
});
</script>
</head>
<body>
<div class="left-panel"></div><div class="div1"></div><div class="div2"></div>

</body>
</html>

切换类if else css

3 个答案: