<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1817611_llcuhaglid.css">
<style>
ul {
list-style-type: none;
display: none;
}
/* li{
} */
div {
width: 100px;
background-color: skyblue;
margin-top: 10px;
}
</style>
</head>
<body>
<div>
<span class="iconfont icon-right-s"></span>
<span>1</span>
</div>
<ul>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div>
<span class="iconfont icon-right-s"></span>
<span>2</span>
</div>
<ul>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<div><span class="iconfont icon-right-s"></span>
<span>3</span></div>
<ul>
<li>9</li>
<li>10</li>
<li>11</li>
</ul>
<script>
var div = document.querySelectorAll('div')
var ul = document.querySelectorAll('ul')
var li = document.querySelectorAll('li')
var span = document.getElementsByClassName('iconfont ')
for (var i = 0; i < div.length; i++) {
div[i].index = i
div[i].tag = '收起'
div[i].onclick = function () {
if (this.tag === '收起') {
for (var i = 0; i < ul.length; i++) {
ul[i].index = i
ul[this.index].style.display = 'block'
span[this.index].className = 'iconfont icon-below-s';
}
this.tag = '打开'
} else {
for (var i = 0; i < ul.length; i++) {
ul[i].index = i
ul[this.index].style.display = 'none'
span[this.index].className = 'iconfont icon-right-s';
}
this.tag = '收起'
}
}
}
</script>
</body>
</html>
简易qq列表
最新推荐文章于 2024-09-04 20:18:34 发布