Rumah > Artikel > hujung hadapan web > css实现侧栏动态显示隐藏的案例

css实现侧栏动态显示隐藏的案例

黄舟asal: 2017-10-25 10:00:342721semak imbas

侧栏点击后只留显示按钮，点击显示按钮返回之前状态

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;);
    });
})

Atas ialah kandungan terperinci css实现侧栏动态显示隐藏的案例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：css属性值语法的详细介绍Artikel seterusnya：css父类清除浮动的原因详解

Artikel berkaitan

Lihat lagi