Home > Article > Web Front-end > A case of dynamic display and hiding of sidebar using css

A case of dynamic display and hiding of sidebar using css

黄舟Original: 2017-10-25 10:00:342686browse

After clicking on the sidebar, only the display button will remain. Click the display button to return to the previous state

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: &#39;-390px&#39;},1000);
        $("#btn-show").animate({"left": "380px"},1000);
        $("#btn-hide").delay(500).animate({left: &#39;0&#39;});
        showResult.animate({width: &#39;90px&#39;,height:&#39;70px&#39;},1000);
        showResult.addClass(&#39;overHide&#39;);
    });
    $("#btn-hide").click(function () {
        $("#table-area").animate({right: &#39;-20px&#39;},1000);
        $("#btn-show").animate({"left": "0px"},1000);
        $("#btn-hide").animate({left: &#39;-70px&#39;});
        showResult.animate({width: &#39;440px&#39;,height:&#39;490px&#39;},1000);
        showResult.removeClass(&#39;overHide&#39;);
    });
})

The above is the detailed content of A case of dynamic display and hiding of sidebar using css. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed introduction to css attribute value syntaxNext article：Detailed introduction to css attribute value syntax

See more

A case of dynamic display and hiding of sidebar using css

Related articles