<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul {
list-style-type: none;
}
.fix>li>a {
color: red;
cursor: pointer;
}
.fix li>ul {
display: none;
/* display: block; */
}
</style>
</head>
<body>
<ul class="fix">
<li><a>这是A</a>
<ul>
<li>a1</li>
<li>a2</li>
<li>a3</li>
<li>a4</li>
<li>a5</li>
</ul>
</li>
<li><a>这是B</a>
<ul>
<li>b1</li>
<li>b2</li>
<li>b3</li>
<li>b4</li>
<li>b5</li>
</ul>
</li>
<li><a>这是C</a>
<ul>
<li>c1</li>
<li>c2</li>
<li>c3</li>
<li>c4</li>
<li>c5</li>
</ul>
</li>
</ul>
</body>
</html>
<script>
//下面有两种方法，注释的代码也是一种方法
var asi = document.querySelectorAll(".fix>li>a");
// var uls = document.querySelectorAll(".fix>li>ul");
var max = true; //定义一个全局变量为true
console.log(asi)
for (var i = 0; i < asi.length; i++) {
asi[i].index = i
asi[i].onclick = function () {
var lis = this.index;
console.log(this.nextElementSibling)
if (max == true) { //当点击的数次为单数的时候让他显示
// uls[lis].style.display = "block";
this.nextElementSibling.style.display = "block";
max = false; //在把之前定位的全局变量改成false
} else if (max == false) { //当点击的数次为偶数的时候让他隐藏
// uls[lis].style.display = "none";
this.nextElementSibling.style.display = "none";
max = true; //在把之前定义的全局变量的值改为true
}
}
}
</script>js中二级tab栏折叠菜单
猜你喜欢
转载自blog.csdn.net/Hgh_1997/article/details/82504903
今日推荐
周排行