css實現側欄動態顯示隱藏的案例

最後更新：2017-10-25 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

側欄點擊後只留顯示按鈕，點擊顯示按鈕返回之前狀態

html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>收縮2</title>    <link rel="stylesheet" href="./sousuo.css">    <script src="./jquery-1.7.2.min.js"></script>    <script src="./sousuo.js"></script></head><body><p id="show-result">    <p id="btn-show">收縮</p>    <p id="btn-hide">顯示</p>    <table id="table-area">        <tbody>        <tr>            <td>經貿北校區</td>            <td>                <ul>                    <li>電話：13315955589</li>                    <li>地址：地大南院綜合樓20樓2017室</li>                </ul>            </td>        </tr>        <tr>            <td>匯華學院、經濟管理學院</td>            <td>                <ul>                    <li>電話：13315955589</li>                    <li>地址：新市南路稅務學校對面一克商務2樓領航學習中心</li>                </ul>            </td>        </tr>        <tr>            <td>鐵道大學</td>            <td>                <ul>                    <li>電話：13315955589</li>                    <li>地址：新鐵道大學家屬院11號樓5單元201(居委會樓上)</li>                </ul>            </td>        </tr>        <tr>            <td>四方學院(南校區)</td>            <td>                <ul>                    <li>電話：13315955589</li>                    <li>地址：坦克北星徽超市西側領航學習中心</li>                </ul>            </td>        </tr>        </tbody></table></p></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');    });})

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More