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

效果图
一个简单地可伸缩左侧导航栏_第1张图片

left.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>
    
    <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="">子栏目1a>span>
                <span class="sonNavSpan"><a href="">子栏目2a>span>
                <span class="sonNavSpan"><a href="">子栏目3a>span>
                <span class="sonNavSpan"><a href="">子栏目4a>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="">子栏目1a>span>
                <span class="sonNavSpan"><a href="">子栏目2a>span>
                <span class="sonNavSpan"><a href="">子栏目3a>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="">子栏目1a>span>
                <span class="sonNavSpan"><a href="">子栏目2a>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="">子栏目1a>span>
                <span class="sonNavSpan"><a href="">子栏目2a>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="">子栏目1a>span>
                <span class="sonNavSpan"><a href="">子栏目2a>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="">子栏目1a>span>
                <span class="sonNavSpan"><a href="">子栏目2a>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="">子栏目1a>span>
                <span class="sonNavSpan"><a href="">子栏目2a>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="">子栏目1a>span>
                <span class="sonNavSpan"><a href="">子栏目2a>span>
            div>          
        span>


    div>
    
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

你可能感兴趣的:(插件)