右侧滑动的
不多说直接自己看代码
<html> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <style type="text/css"> body{ padding: 0px; margin: 0px; } .sidebar{ width: 220px; height: 100%; min-width: 120px; display: inline-block; margin: 0px; right: -200px; position: fixed; } .sidebar .sidebar-left{ width: 20px; height: 100%; display: inline-flex; display: -webkit-inline-flex; flex-flow:column nowrap; justify-content:center; align-items:center; float: left; } .sidebar .sidebar-right{ width: 200px; display: inline-block; height: 100%; float: left; } .sidebar .sidebar-pull-button{ width: 100%; display: block; height: 100px; flex:0 0 auto; line-height: 25px; text-align: center; overflow: hidden; cursor: pointer; } .btn{ background-color: green; } .bk{ background-color: red; } .slideLeft{ transform: translate(-200px,0px); transition-delay: 0s; transition-timing-function: ease; transition-duration: 1s; } .slideRight{ transform: translate(-0px,0px); transition-delay: 0s; transition-timing-function: ease; transition-duration: 1s; } </style> <body> <div class="sidebar"> <div class="sidebar-left"> <div class="btn sidebar-pull-button"> 高级搜索 </div> </div> <div class="bk sidebar-right"> </div> </div> <script type="text/javascript"> $('.btn').on('click',function(){ if(!$('.sidebar').hasClass('slideLeft')) { $('.sidebar').addClass('slideLeft').removeClass('slideRight'); } else { $('.sidebar').removeClass('slideLeft').addClass('slideRight'); } }); </script> </body> </html>
