After the sidebar is clicked, only the display button is left, and the display button is clicked to return to the previous state
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Shrink 2</title> <link rel="stylesheet" href="./sousuo.css"> <script src="./jquery-1.7.2.min.js"></script> <script src="./sousuo.js"></script> </head> <body> <div id="show-result"> <div id="btn-show">收缩</div> <div id="btn-hide">显示</div> <table id="table-area"> <tbody> <tr> <td>Business North Campus</td> <td> <ul> <li>Phone: 13315955589</li> <li>Address: Room 2017, 20th Floor, Comprehensive Building, South Campus, Di University</li> </ul> </td> </tr> <tr> <td>Huihua College, School of Economics and Management</td> <td> <ul> <li>Phone: 13315955589</li> <li>Address: Linghang Learning Center, 2nd Floor, Yike Business, opposite Taxation School, Xinshi South Road</li> </ul> </td> </tr> <tr> <td>Railway University</td> <td> <ul> <li>Phone: 13315955589</li> <li>Address: Room 201, Unit 5, Building 11, Family Court, New Railway University (Upstairs of the Neighborhood Committee)</li> </ul> </td> </tr> <tr> <td>Sifang College (South Campus)</td> <td> <ul> <li>Phone: 13315955589</li> <li>Address: Pilot Learning Center on the west side of Tank Beixinghui Supermarket</li> </ul> </td> </tr> </tbody> </table> </div> </body> </html>
css
* { margin: 0; padding: 0; /*font-family: "Microsoft YaHei";*/ } body{position: relative} ul{list-style: none} #show-result { overflow-x: hidden; overflow-y: auto; width: 440px; position: absolute; right: 20px; top: 150px; height: 490px; /*background-color: #7bbedf;*/ } #show-result table { position: absolute; overflow-y: auto; display: block; width: 390px; height: 100%; /* position: relative; */ background-color: yellowgreen; right: -20px; } table tr { position: relative; } table tr td { display: block; /* width: 100%; */ } table tr td:first-child { border-top: 1px solid #DEDEDE; color: #4890D7; /* background-color: #00D685; */ /* height: 30%; */ font-size: 20px; /* color: white; */ line-height: 40px; padding-left: 20px; } table tr td:last-child { /* font-size: 18px; */ padding-left: 20px; /* height: 70%; */ } #btn-show { position: absolute; width: 70px; height: 70px; background-color: darkgoldenrod; line-height: 70px; text-align: center; color: white; cursor: pointer; left: 0; } .hideArea { display: none; } #btn-hide { width: 70px; height: 70px; background-color: red; position: absolute; cursor: pointer; left: -70px; line-height: 70px; text-align: center; }
jQuery
$(document).ready(function () { var showResult = $("#show-result"); $("#btn-show").click(function () { $("#table-area").animate({right: '-390px'},1000); $("#btn-show").animate({"left": "380px"},1000); $("#btn-hide").delay(500).animate({left: '0'}); showResult.animate({width: '90px',height:'70px'},1000); showResult.addClass('overHide'); }); $("#btn-hide").click(function () { $("#table-area").animate({right: '-20px'},1000); $("#btn-show").animate({"left": "0px"},1000); $("#btn-hide").animate({left: '-70px'}); showResult.animate({width: '440px',height:'490px'},1000); showResult.removeClass('overHide'); }); })
expand