使用html和jquery实现左侧可收缩导航栏

来源：互联网发布：淘宝最大股东是日本人编辑：程序博客网时间：2024/05/15 01:00

实现效果如下：

html：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" type="text/css" href="../static/bootstrap-3.3.7-dist/css/bootstrap.css" >    <link rel="stylesheet" type="text/css" href="../static/css/nav-left.css" >    <script src="../static/js/jquery-3.2.1.min.js"></script>    <script src="../static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script></head><body>    <div class="nav_left">        <div class="nav_left_main one_level_div">            <div class="one_div">                 主页            <img src=../static/images/arrow.png>            </div>        </div>        <div class="nav_left_about one_level_div">            <div class="one_div">                 关于            <img src=../static/images/arrow.png>            </div>        </div>        <div class="nav_left_about one_level_div">            <div class="one_div">                计费                <img src=../static/images/arrow.png>            </div>            <div class="nav_left_about one_leve2_div">                <div class="two_div" >                     计费方式1                    <img src=../static/images/arrow.png>                </div>            </div>            <div class="nav_left_about one_leve2_div">                <div class="two_div">                     计费方式2                    <img src=../static/images/arrow.png>                </div>            </div>            <div class="nav_left_about one_leve2_div">                <div class="two_div">                     计费方式3                    <img src=../static/images/arrow.png>                </div>                <div class="nav_left_about one_leve3_div">                   <div class="three_div">                     计费方式3AA                    <!--<img src=../static/images/arrow.png>-->                    </div>                </div>                <div class="nav_left_about one_leve3_div">                   <div class="three_div">                     计费方式3BB                    <!--<img src=../static/images/arrow.png>-->                    </div>                </div>            </div>        </div>        <div class="nav_left_about one_level_div">            <div class="one_div">                查账                <img src=../static/images/arrow.png>            </div>            <div class="nav_left_about one_leve2_div">                <div class="two_div">                     查账方式                    <img src=../static/images/arrow.png>                </div>                <div class="nav_left_about one_leve3_div">                    <div class="three_div">                     查账方式AA                    <!--<img src=../static/images/arrow.png>-->                </div>                </div>                <div class="nav_left_about one_leve3_div">                    <div class="three_div">                     查账方式BB                    <!--<img src=../static/images/arrow.png>-->                </div>                </div>            </div>            <div class="nav_left_about one_leve2_div">                <div class="two_div">                     查账方式2                    <img src=../static/images/arrow.png>                </div>            </div>        </div>         <div class="nav_left_main one_level_div">            <div class="one_div">                 主页2            <img src=../static/images/arrow.png>            </div>        </div>    </div></body><script language="JavaScript">    $(document).ready(function () {        $('.one_leve2_div').hide();    });    $('.one_div').click(function () {        $(this).parents().children('.one_leve2_div').toggle(300);        $(this).parents().siblings().children('.one_leve2_div').hide();    });    $('.two_div').click(function () {        $(this).parents().children('.one_leve3_div').toggle(300);        $(this).parents().siblings().children('.one_leve3_div').hide();    });</script></html>

css：

        .nav_left{            width: 180px;            height: 600px;            overflow: auto;            background-color: #f7f7f7;            box-sizing: border-box;        }        .one_level_div,.one_leve2_div,.one_leve3_div{            box-sizing: border-box;            width: 180px;            background-color:white;            color: #0f0f0f;            line-height: 40px;            cursor: pointer;        }        .one_div{            padding-left: 5px;            border-radius: 5px;        }        .two_div{            padding-left: 10px;            border-radius: 5px;        }        .three_div{            padding-left: 15px;            border-radius: 5px;        }        .one_div:hover{            background-color: #eee;        }        .two_div:hover{            background-color: #eee;        }        .three_div:hover{            background-color: #eee;        }        .nav_left img{            width: 10px;            height: 10px;        }

注意包含导航栏的文字的div不要设置hight，使用jquery的toggle()切换显示与隐藏。

阅读全文

0 0