实现效果如下:
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()切换显示与隐藏。