一个简单地可伸缩左侧导航栏

来源：互联网发布：excel数据有效性空格编辑：程序博客网时间：2024/04/30 13:37

效果图
这里写图片描述

left.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>设备预约</title>     <link href="./css/style.css" rel="stylesheet" type="text/css"/>     <script type="text/javascript" src="jquery-1.10.2.js" ></script></head><body>    <!-- left 侧边栏 start -->    <div id="left">        <span class="navSpan" data-tags="1">            <a class="navLink" href="#">添加实验设备</a>            <div class="sonNavsDiv" data-tags-div="1">                <span class="sonNavSpan"><a href="">子栏目1</a></span>                <span class="sonNavSpan"><a href="">子栏目2</a></span>                <span class="sonNavSpan"><a href="">子栏目3</a></span>                <span class="sonNavSpan"><a href="">子栏目4</a></span>            </div>                  </span>        <span class="navSpan" data-tags="2">            <a class="navLink" href="#">添加实验设备</a>            <div class="sonNavsDiv" data-tags-div="2">                <span class="sonNavSpan"><a href="">子栏目1</a></span>                <span class="sonNavSpan"><a href="">子栏目2</a></span>                <span class="sonNavSpan"><a href="">子栏目3</a></span>            </div>                  </span>        <span class="navSpan" data-tags="3">            <a class="navLink" href="#">添加实验设备</a>            <div class="sonNavsDiv" data-tags-div="3">                <span class="sonNavSpan"><a href="">子栏目1</a></span>                <span class="sonNavSpan"><a href="">子栏目2</a></span>            </div>                  </span>        <span class="navSpan" data-tags="4">            <a class="navLink" href="#">添加实验设备</a>            <div class="sonNavsDiv" data-tags-div="4">                <span class="sonNavSpan"><a href="">子栏目1</a></span>                <span class="sonNavSpan"><a href="">子栏目2</a></span>            </div>                  </span>        <span class="navSpan" data-tags="5">            <a class="navLink" href="#">添加实验设备</a>            <div class="sonNavsDiv" data-tags-div="5">                <span class="sonNavSpan"><a href="">子栏目1</a></span>                <span class="sonNavSpan"><a href="">子栏目2</a></span>            </div>                  </span>        <span class="navSpan" data-tags="6">            <a class="navLink" href="#">添加实验设备</a>            <div class="sonNavsDiv" data-tags-div="6">                <span class="sonNavSpan"><a href="">子栏目1</a></span>                <span class="sonNavSpan"><a href="">子栏目2</a></span>            </div>                  </span>        <span class="navSpan" data-tags="7">            <a class="navLink" href="#">添加实验设备</a>            <div class="sonNavsDiv" data-tags-div="7">                <span class="sonNavSpan"><a href="">子栏目1</a></span>                <span class="sonNavSpan"><a href="">子栏目2</a></span>            </div>                  </span>        <span class="navSpan" data-tags="8">            <a class="navLink" href="#">添加实验设备</a>            <div class="sonNavsDiv" data-tags-div="8">                <span class="sonNavSpan"><a href="">子栏目1</a></span>                <span class="sonNavSpan"><a href="">子栏目2</a></span>            </div>                  </span>    </div>    <!-- left 侧边栏 end --></body><script>    $(function(){        var tags = 0;        $(".navSpan").click(function(){            var thisTags = $(this).data('tags');            //判断是否已经打开一个子导航栏            if(isSonNavOpen())            {                //判断是否和当前点击的是同一个                if(tags == thisTags)        //是同一个，关闭该子导航                {                    closeSonNav(tags);                }                else                                    //不是同一个, 关闭旧的并打开一个新的                {                    closeSonNav(tags);                    openSonNav(thisTags);                }            }            else            //当前没有子导航打开，打开一个新的            {                openSonNav(thisTags);            }        });        //判断是否已经打开一个子导航栏        function isSonNavOpen()        {            if(tags != 0)       //已经打开            {                return true;            }            return false;        }        //打开一个子导航        function openSonNav(thisTags)        {            var sonNavsDiv = $("div[data-tags-div="+ thisTags +"]");            //显示子导航栏            sonNavsDiv.css("display", "block");            tags = thisTags;        }        //关闭一个子导航        function closeSonNav(thisTags)        {            var sonNavsDiv = $("div [data-tags-div="+ thisTags +"]");            sonNavsDiv.css("display", "none");              //关闭后把标记清0， 否则打开一个后，一直是已经打开状态            tags = 0;        }    });</script></html>

left.css

body{    margin-left: auto;    margin-right: auto;    padding: 0;    width: 1000px;    height: 100%;    background: #F4F4F4;}#left{    background: #C6D9F1;    height: 100%;    float: left;}.navSpan{    display: block;    font-size: 40px;    font-family: "黑体";    margin-top: 30px;    line-height: 55px;}.navSpan:hover{    background: #8EB4E3;}.sonNavSpan{    display: block;    font-size: 30px;    font-family: "黑体";    margin-top: 15px;    line-height: 35px;}.sonNavSpan a{    color: #5AD7F3;    text-decoration: none;}.sonNavsDiv{    display: none;    margin-left: 30px;}.navLink{    color: #fff;    text-decoration: none;}#right{    width: 750px;}#caozuoTable{    margin-left: auto;    margin-right: auto;    width: 600px;    height: 100px;    align: center;    rules: rows;}

注：需要导jQuery

0 0