一、功能介绍
JS实现垂直导航栏的折叠和弹出,实现功能如下:
同一个导航可以反复折叠与弹出
同一个导航不可以反复折叠与弹出
二、实现方式
1.两种思路
- 本次鼠标点击某一级导航,展开该一级导航下的二级导航,然后关闭上一次的二级导航
- 鼠标点击某一级导航,先通过遍历关闭所有的二级导航,然后打开当前一级导航下的二级导航
2.两种实现方式
- 通过CSS样式属性,display=none(折叠)/dispaly=block(展开)实现二级导航的折叠与弹出;
- 通过块状元素的高度:height:0px/200px; maxHeight来实现二级导航的折叠与弹出;
3.源码如下
第一种思路源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
<style>
ul{
padding: 200px 300px;
font-size: 32px;
}
li{
padding-top: 20px;
}
.div_show{
width: 200px;
height:100px;
/* display: none; */
background-color: aquamarine;
}
.div_hide{
display: none;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#" onclick="click_menu('div_1')">
<img src="img/tip/chevron-right.svg">第一个目录</img>
</a>
<div class="div_hide" id="div_1"></div>
</li>
<li>
<a href="#" onclick="click_menu('div_2')">
<img src="img/tip/chevron-right.svg">第二个目录</img>
</a>
<div class="div_hide" id="div_2"></div>
</li>
<li>
<a href="#" onclick="click_menu('div_3')">
<img src="img/tip/chevron-right.svg">第三个目录</img>
</a>
<div class="div_hide" id="div_3"></div>
</li>
</ul>
</body>
<script>
var last_menu_id = "";
function click_menu(id){
var menu_id = document.getElementById(id);
var img_div = menu_id.parentElement.firstElementChild.firstElementChild;
if (menu_id.className == "div_hide"){
menu_id.className = "div_show";
//当div展开之后,将图标改成向下
img_div.setAttribute("src", "img/tip/chevron-down.svg");
}else{
menu_id.className = "div_hide";
//当div收缩之后,将图标改成向右
img_div.setAttribute("src", "img/tip/chevron-right.svg");
}
console.log("before last_menu_id is:")
console.log(last_menu_id)
//写一个逻辑,关闭其他div
if((last_menu_id != "") && (last_menu_id != id)){
var last_id = document.getElementById(last_menu_id);
last_id.className = "div_hide"; //收缩上次的DIV
//当div收缩之后,将图标改成向右
var last_img_div = last_id.parentElement.firstElementChild.firstElementChild;
last_img_div.setAttribute("src", "img/tip/chevron-right.svg");
}
last_menu_id = id; //存储上一次的menu_id
console.log("after last_menu_id is:")
console.log(last_menu_id)
}
</script>
</html>
第二种思路源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
<style>
ul{
padding: 200px 300px;
font-size: 32px;
}
li{
padding-top: 20px;
}
.child{
width: 200px;
background-color: aquamarine;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#" class="father">第一个目录</a>
<div class="child"></div>
</li>
<li>
<a href="#" class="father">第二个目录</a>
<div class="child"></div>
</li>
<li>
<a href="#" class="father"> 第三个目录</a>
<div class="child"></div>
</li>
</ul>
</body>
<script>
var father_list = document.getElementsByClassName("father");
var child_list = document.getElementsByClassName("child");
for(let i=0; i<father_list.length; i++){
father_list[i].addEventListener('click', function(event){
for(let j=0; j<child_list.length; j++){
//child_list[j].style.maxHeight = 0+"px";//假如有内容的话,可以使用maxHeight,能够跟随内容高度自适应
child_list[j].style.height = 0+"px";
}
console.log(child_list[i]);
//child_list[i].style.maxHeight = 200+"px";//假如有内容的话,可以使用maxHeight,能够跟随内容高度自适应
child_list[i].style.height = 200+"px";
},false)
}
</script>
</html>
#第二种思路参考enkongkong提供的方法 : https://ask.csdn.net/questions/7410157?expend=true