<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { font-family: "Microsoft YaHei", serif; } body, dl, dd, p, h1, h2, h3, h4, h5, h6 { margin: 0; } ol, ul, li { margin: 0; padding: 0; list-style: none; } img { border: none } #wrap{ width: 200px; margin: 50px auto; border: 1px solid #999; user-select: none; } #wrap .title{ width: 100%; height: 30px; font-size: 16px; line-height: 30px; text-indent: 5px; background: pink; color: #fff; cursor: pointer; border-bottom: 1px dashed #eee; } #wrap .list{ display: none; } #wrap .list.show{ display: block; } #wrap .list li{ width: 100%; height: 20px; line-height: 20px; font-size: 12px; border-bottom: 1px dashed #eee; text-indent: 20px; cursor: pointer; } #wrap .list li:hover{ background-color: #eee; } </style> </head> <body> <div id="wrap"> <div class="friend"> <p class="title">同事</p> <ul class="list"> <li>qq</li> <li>ww</li> <li>ee</li> <li>rr</li> </ul> </div> <div class="friend"> <p class="title">好友</p> <ul class="list"> <li>tt</li> <li>yy</li> <li>uu</li> </ul> </div> <div class="friend"> <p class="title">同学</p> <ul class="list"> <li>ii</li> <li>oo</li> <li>pp</li> <li>aa</li> <li>ss</li> </ul> </div> </div> <script> let aDiv = document.querySelectorAll("#wrap .title"), aList = document.querySelectorAll("#wrap .list"); let len = aDiv.length; let a=0; for (let i=0;i<len;i++){ aDiv[i].onclick = function () { // 点击标题div之后,遍历所有的list和标题对应的展开其他的隐藏 // 用记录值的方法最好 // for (let j=0;j<len;j++) { // if (i===j){ // aList[j].classList.add("show"); // } else{ // aList[j].classList.remove("show"); // } // } // 三目改写的遍历方法 for (let j=0;j<len;j++) { i===j?aList[j].classList.add("show"):aList[j].classList.remove("show"); let arrt = i===j?"add":"remove"; aList[j].classList[arrt]("show"); } // 记录值的方法 // aList[a].classList.remove("show"); // a = i; // aList[i].classList.add("show"); } } </script> </body> </html>
原文地址:https://www.cnblogs.com/zhangyu666/p/11479983.html
时间: 2024-10-12 19:41:47