利用 JS 制作一个下拉列表（进阶版）

利用 JS 制作一个下拉列表（进阶版） 直接上代码

var w1 = document.querySelectorAll("#odiv .w1");
	
	for (let i=0 ;i<w1.length ; i++) {
		w1[i].addEventListener("click",function(){
			
			var div1 = w1[i].querySelector("#odiv .w1 .font2");
			
			div1.classList.toggle("show");
			
			var er=this.parentNode.children;
			
			for (let f=0;f<er.length;f++) {
				if(er[f]!==this){
				er[f].querySelector(".font2").classList.remove("show");
				}
			}
		})
		
	}
	var dd2=document.querySelectorAll("#odiv .w1 .font2 .div4")
	for (let v=0;v<dd2.length;v++) {
		dd2[v].addEventListener("click",function(){
			event.stopPropagation(); 
			
			var div2= dd2[v].querySelector("#odiv .div4 .dd1");
			
			div2.classList.toggle("show1");
			
			var fu = this.parentNode.children
		
			
			for(let s=0;s<fu.length;s++)
			{
				if( fu[s] !== this){
					console.log(fu[s]);
			 	fu[s].querySelector(".div4 .dd1").classList.remove("show1");
			 	}
			}
			 
		})
	
	}

前端

<div id="odiv">
			<div class="w1">
			<div class="font1 ">新闻1</div>
				<div class="font2">
					<div class="div4 ">
					<h5 class="h5">文字1</h5>
					<ul class="dd1">
						<li>1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
					</ul>
					</div>
					<div class="div4 ">
					<h5 class="h5">文字1</h5>
					<ul class="dd1">
						<li>1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
					</ul>
					</div>
					<div class="div4 ">
					<h5 class="h5">文字1</h5>
					<ul class="dd1">
						<li>1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
					</ul>
					</div>
				</div>
			</div>
			

			<div class="w1">
			<div class="font1 ">新闻1</div>
					<div class="font2">
					<div class="div4 ">
					<h5 class="h5">文字1</h5>
					<ul class="dd1">
						<li>1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
					</ul>
					</div>
					<div class="div4 ">
					<h5 class="h5">文字1</h5>
					<ul class="dd1">
						<li>1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
					</ul>
					</div>
					<div class="div4 ">
					<h5 class="h5">文字1</h5>
					<ul class="dd1">
						<li>1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
					</ul>
					</div>
				</div>
				
			</div>
			<div class="w1">
			<div class="font1 ">新闻1</div>
					<div class="font2">
					<div class="div4 ">
					<h5 class="h5">文字1</h5>
					<ul class="dd1">
						<li>1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
					</ul>
					</div>
					<div class="div4 ">
					<h5 class="h5">文字1</h5>
					<ul class="dd1">
						<li>1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
					</ul>
					</div>
					<div class="div4 ">
					<h5 class="h5">文字1</h5>
					<ul class="dd1">
						<li>1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
					</ul>
					</div>
				</div>
					
			</div>
		</div>

css

	body,h5,ul{
			padding: 0;
			margin: 0;
		}
		ul,li{
			list-style: none;
		}
		#odiv{
			width: 300px;
			height: auto;			
		}
		#odiv .w1{
			width: 300px;
			height: auto;
			
		}
		#odiv .w1 .font1{
			width: 300px;
			height: 29px;
			border-bottom: 1px solid blue;
			text-align: center;
			line-height: 30px;
			background: #C0C0C0;
			
		}
		
		
		
		
		#odiv .w1 .font2{
			height: 0;
			overflow: hidden;
		}
		#odiv .w1 .show
		{
			height: auto;
			
		}
		
		#odiv .w1  .div4 .h5{
			width: 300px;
			height: 29px;
			border-bottom: 1px solid #FFFFFF;
			text-align: center;
			line-height: 30px;
			background: cadetblue;
		}
		#odiv .w1  .div4 .dd1{
			height: 0;
			overflow: hidden;
		}
		#odiv .w1 .div4 .show1{
			height: 100px;
		}
		#odiv .w1  .div4 .dd1>li{
			height: 24px;
			background: #000000;
			color: #FFFFFF;
			text-align: center;
			border-bottom: 1px solid red;
		}