左側選單收拉——模板
阿新 • • 發佈：2018-12-10
前言：做好模板隨時用
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>Document</title> <style> body{ line-height:1.4; color:#333; font-family:arial; font-size: 12px; } input,textarea,select{ font-size:100%; font-family:inherit; } body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{ margin:0; } h4,h5,h6{ font-size:1em; } ul,ol{ padding-left:0; list-style-type:none; } img{border:0;} a{ color: #5f5f5f; } a, a:hover, a:focus { text-decoration: none; outline: none; } /*樣式start*/ .box{ border: 1px solid red; height: 300px; } .box1{ position: relative; width: 200px; border:1px solid green; height: 200px; float: left; } .box1 .showorhide{ display: inline-block; width: 14px; height: 25px; background: url(65.png)no-repeat; position: absolute; top: 50%; right: 0; transform: translate(100%,-50%); cursor: pointer; } .box2{ background: cyan; margin-left: 210px; } .hide2{ margin-left: -201px; } .box2show{ margin-left: 20px; } </style> </head> <body> <div class="box"> <div class="box1"> <ul> <li>導航</li> <li>導航</li> <li>導航</li> <li>導航</li> <li>導航</li> <li>導航</li> <li>導航</li> <li>導航</li> <li>導航</li> <li>導航</li> </ul> <div class="showorhide"></div> </div> <div class="box2"> <div>內容</div> <div>內容</div> <div>內容</div> <div>內容</div> </div> </div> <script src="jquery-3.1.1.min.js"></script> <script> $(".box").on("click",".showorhide",function(e){ e.preventDefault(); $(".box1 ").toggleClass("hide2"); $(".box2").toggleClass("box2show"); }) </script> </body> </html>
效果：
