可以显示不可以隐藏，浏览器没有报错
来源：3-3 jquery左侧导航菜单效果书写
慕斯卡9565767
2019-05-17 11:35:01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<meta name="format-detection" content="telephone=no,email=no,address=no">
<title>慕课网左侧导航</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body class="active">
<div class="outwrap">
<header class="header">
<div class="topbarbtn"></div>
<h2>header</h2>
</header>
<section class="maincontent">
<p>我是内容</p>
</section>
<footer class="footer">footer</footer>
</div>
<section class="slidebar">
<ul>
<li>左侧导航</li>
<li>左侧导航</li>
<li>左侧导航</li>
<li>左侧导航</li>
<li>左侧导航</li>
</ul>
</section>
<script type="text/javascript">
//面向对象
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>
css代码
.header,.footer{
position: absolute;
left: 0;
right: 0;
height: 45px;
line-height: 45px;
text-align: center;
font-size: 1.4rem;
}
.header{
border-bottom: 1px solid red;
top: 0;
}
.footer{
border-top:1px solid red;
bottom: 0;
}
.outwrap{
position: absolute;
top: 0px;
bottom: 0px;
left: 0;
right: 0;
padding: 45px 0;
margin-left:0px;
}
.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:0px;
background: #666;
z-index: 100;
}
.slidebar li{height: 40px;line-height: 40px;color: #fff;border-bottom: 1px solid #333}
公共代码
html,body,ul,ol,li,dd,dt,h1,h2,h3,h4,h5,h6,p{margin:0;padding:0;}
html,body{height:100%;-webkit-font-size-adjust:100%;font-size-adjust:100%;}
html{font-size:32.5%;}
*{box-sizing:border-box;}/*属性允许您以特定的方式定义匹配某个区域的特定元素 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制*/
h1{font-size: 1.8rem;}h2{font-size: 1.6rem;}h3{font-size: 1.4rem;}
input,button{-webkit-appearance:none;-moz-appearance:none;appearance:none;}
5回答
-
好帮手慕码
2019-05-18
同学你好！
（1）需要在css中加上left:-20px
（2）需要在点击出现之后，去掉left值
如果帮助到了你 欢迎采纳 祝学习愉快~
0 -
慕斯卡9565767
提问者
2019-05-17
left负20但是问题还是出现了，老师您实现有这个问题吗0 -
好帮手慕糖
2019-05-17
同学你好，这是因为宽度为0，但是文字挤到一起显示了；这里有如下两种思路：
1、最开始不是改变宽度，设置有宽度，通过改变left值实现效果。
2、现有的基础上添加下left，使其隐藏到左边去，例：如下；不过点击出现的时候，需要把left值去掉哦。
希望能帮助到你，祝学习愉快！
0 -
慕斯卡9565767
提问者
2019-05-17
老师在白色背景下看不到，我用了红色这恶搞如何解决0 -
好帮手慕糖
2019-05-17
同学你好，如下，应该是添加一个类哦，下面已经删除过了。例：
希望能帮助到你，欢迎采纳。
祝学习愉快！
0
相似问题
回答 1
回答 2