$(".content").on("click", function(e) { if($(".left-menu").width() == 200) { $(".left-menu").width(0); } else { $(".left-menu").width(200); } });
<div class="container"> <div class="left-menu"> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> <p>做菜单内容</p> </div> <div class="content"> <div style="margin-top: 200px;"> <p>正文内容===================</p> <p>正文内容===================</p> <p>正文内容===================</p> <p>正文内容===================</p> <p>正文内容===================</p> <p>正文内容===================</p> <p>正文内容===================</p> <p>正文内容===================</p> <p>正文内容===================</p> <p>正文内容===================</p> <p>正文内容===================</p> <p>正文内容===================</p> <p>正文内容===================</p> <p>正文内容===================</p> <p>正文内容===================</p> </div> </div> </div>
body { background-color: yellow; padding: 0; margin: 0; } .container { } .left-menu { background-color: yellowgreen; width: 0px; position: absolute; top: 0; left: 0; bottom: 0; transition: width .2s ease; overflow: auto; z-index: 1; } .content { position: absolute; top: 0; bottom:0; left:0; right: 0; overflow: auto; /* z-index: 2; */ }