Heim >Web-Frontend >CSS-Tutorial >Ein Fall der dynamischen Anzeige und Ausblendung der Seitenleiste mithilfe von CSS

Ein Fall der dynamischen Anzeige und Ausblendung der Seitenleiste mithilfe von CSS

黄舟Original: 2017-10-25 10:00:342743Durchsuche

Nach dem Klicken auf die Seitenleiste bleibt nur die Anzeigeschaltfläche übrig. Klicken Sie auf die Anzeigeschaltfläche, um zum vorherigen Status zurückzukehren

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

Das obige ist der detaillierte Inhalt vonEin Fall der dynamischen Anzeige und Ausblendung der Seitenleiste mithilfe von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Einführung in die Syntax von CSS-AttributwertenNächster Artikel：Detaillierte Einführung in die Syntax von CSS-Attributwerten

In Verbindung stehende Artikel

Mehr sehen