实现效果：点击父级标题时下拉菜单会出现，同时其他已下拉的菜单会闭合。再次点击当前打开的父级菜单时，闭合。
CSS：
* {margin: 0;padding: 0;}li {list-style-type: none;}a {text-decoration: none;}#list {width: 300px;margin: 50px;font-weight: 700;}#list li {overflow: hidden;height: 40px;transition: 1s;}#list li p.tit {height: 40px;background-color: #000;line-height: 40px;color: #fff;}#list li p {height: 30px;background-color: #ff0;border-bottom: 1px solid;color: #000;}#list .show {height: 134px;}
HTML：
<ul id="list"><li><p class="tit">0点击标题</p><p>2222</p><p>2222</p><p>2222</p></li><li><p class="tit">1点击标题</p><p>2222</p><p>2222</p><p>2222</p></li><li><p class="tit">2点击标题</p><p>2222</p><p>2222</p><p>2222</p></li></ul>
JS：
以下罗列了三种方法，其中一二种方法在注释里，但是点击父级标题不能闭合。
第三种方法是给父级标题做了一个开关。
主要是利用更换class类名来设定li标签的隐藏与否。
let aLi = document.querySelectorAll("#list li")let aTit = document.getElementsByClassName("tit")let len = aLi.length;console.log(aLi, aTit);/* for (let i = 0; i < len ; i++) {aTit[i].onclick = function () { //1for (let j = 0; j <= len - 1; j++) {aLi[j].className = ""}aLi[i].className = "show" //1}} */// 存 上一次 元素的下标 /* let index = 0 //0for (let i = 0; i <len ; i++) {aTit[i].onclick = function () { //i= 0aLi[index].className = ""; //aLi[2].className = "";index = i //index => 0aLi[index].className = "show"; //aLi[0].className = "show";}} */for (let i = 0; i < len ; i++) {aTit[i].bool = true; //关闭状态 可以被点击打开 给每一个对象 存一下 状态aTit[i].onclick = function () {if (aTit[i].bool) { //正关闭 可被打开aLi[i].className = "show";} else {// 已打开 可被关闭aLi[i].className = "";}aTit[i].bool = !aTit[i].bool;for (let j = 0; j < len; j++) { // 0 1 2 falee if (j !== i && aTit[j].bool === false) { //目的 清空 已经被打开的 li 并且不能 清空 我当前点击的这个li aLi[j].className = ""; //关闭aTit[j].bool = true;}}}}
