使用html和jquery實現左側可收縮導航欄
阿新 • • 發佈：2019-02-04
實現效果如下：
html：
css：<!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>
注意包含導航欄的文字的div不要設定hight，使用jquery的toggle()切換顯示與隱藏。.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; }