为什么没反应
来源：3-3 jquery左侧导航菜单效果书写
慕莱坞938584
2019-03-06 18:55:31
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>左侧导航</title>
<link rel="stylesheet" href="../hj/reset.css">
</head>
<body>
<div class="outwrap">
<header class="header">header
<div class="topbarbtn"></div>
</header>
<section class="maincontent">我是内容</section>
<footer class="footer">footer</footer>
</div>
<section class="slidebar">
<ul>
<li>左侧导航</li>
<li>左侧导航</li>
<li>左侧导航</li>
<li>左侧导航</li>
</ul>
</section>
<script>
var slideBarObj={
init:function(){
var _this=this;
//点击事件
$(".topbarbtn").on("click",function () {
if($(this).hasClass("active")){
_this.slideLeft();
}else{
_this.slideRight();
}
})
},
slideRight:function(){
$(".slidebar").animate({"width":"150px"},50);
$(".outwrap").animate({"margin-left":"150px"},50);
$(".topbarbtn").removeClass("active");
},
slideLeft:function(){
$(".slidebar").animate({"width":"0"},50);
$(".outwrap").animate({"margin-left":"0"},50);
$(".topbarbtn").removeClass("active");
},
}
slideBarObj.init();
</script>
</body>
</html>*{
margin:0;
padding:0;
box-sizing:border-box;
}
html,body{
height: 100%;
-webkit-font-size-adjust:100%;
font-size-adjust:100%;
}
html{
font-size: 62.5%;
}
h1{
font-size: 1.8rem;
}
input,button{
-webkit-appearance: none;
appearance: none;
-o-appearance: none;
}
/* body{
-webkit-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
}
body.active{
transform: translate(150px,0);
-webkit-transform: translate(150px,0);
-o-transform: translate(150px,0);
-ms-transform: translate(150px,0);
} */
.header,.footer{
position: absolute;
left:0;
right:0;
height: 45px;
line-height: 45px;
font-size: 1.4rem;
text-align: center;
}
.header{
border-bottom: 1px solid red;
top:0;
}
.footer{
border-bottom: 1px solid red;
bottom:0;
}
.outwrap{
position: absolute;
padding:45px 0;
margin-left: 0;
top:0px;
bottom: 0px;
left: 0;
right:0;
text-align: center;
}
.topbarbtn{
width:45px;
height: 45px;
float: left;
line-height: 2.6;
}
.topbarbtn::before{
content:"";
width:20px;
height: 2px;
background:#999;
display: inline-block;
box-shadow: 0 7px 0 #999,0 -7px 0 #999;
}
.slidebar{
position: absolute;
top:0;
bottom: 0;
width:0;
background:#666;
/* -webkit-transform: translate(-150px,0);
-ms-transform: translate(-150px,0);
-o-transform: translate(-150px,0);
transform: translate(-150px,0);
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out; */
z-index:100;
}
.slidebar li{
height: 40px;
padding-left: 10px;
line-height: 40px;
color:#fff;
border-bottom:1px solid #333;
}
1回答
-
Miss路
2019-03-06
同学，你好。
你说的是做了什么操作没有反应呢？我这里是有点击显示效果的：
你说的是这个效果吗?
另外提醒一下你，你的代码中没有引入jQuery不知道你本地的代码是否有引入。
可以引入一下再试试，如果还不能解决你的问题，请详细描述你的问题，以便老师高效、准确的为你解答。
如果帮助到了你，欢迎采纳！
祝学习愉快！
0
相似问题
回答 2
回答 1