利用JavaScript实现下拉菜单

实现效果：点击父级标题时下拉菜单会出现，同时其他已下拉的菜单会闭合。再次点击当前打开的父级菜单时，闭合。

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 () { //1

		for (let j = 0; j <= len - 1; j++) {
			aLi[j].className = ""
		}
		aLi[i].className = "show" //1
	}
} */


// 存 上一次 元素的下标  

/* let index = 0 //0
for (let i = 0; i <len ; i++) {
	aTit[i].onclick = function () { //i= 0
		aLi[index].className = ""; //aLi[2].className = "";
		index = i //index => 0
		aLi[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;
			}
		}

	}

}