[TANDEROID]

Сделал выпадающее меню, все вроде как работает но вот есть проблема с закрытием. Грубо говоря, если открыть меню, открыть П1 и П4(только у них есть подпункты), то при скрытии меню(нажатие на кнопку меню) скроется только П1. Не могу понять почему, будто for считает только раз

<style>
#menu{
	width: 100%;
	min-height: 45px;
	background-color: #363636;
	font-size: 38px;
	text-align: center;
	color: white;
	font-family: arial;
	transition:         all 0.5s ease;
	-o-transition:      all 0.5s ease;
	-moz-transition:    all 0.5s ease;
	-webkit-transition: all 0.5s ease;
}  
#menu div{
	transition:         all 0.5s ease;
	-o-transition:      all 0.5s ease;
	-moz-transition:    all 0.5s ease;
	-webkit-transition: all 0.5s ease;
}
.mList0U .mList1{                
	font-size: 38px;             
	background-color: #4F4F4F;   
	border-top: 3px solid white; 
}                                
.mList0N .mList1{                
	font-size: 0px;
	background-color: #363636;
	border-top: 0px solid #363636;
}
.mList1U .mList2{                
	font-size: 38px;             
	background-color: #696969;   
	border-top: 3px solid white; 
}                                
.mList1N .mList2{                
	font-size: 0px;
	background-color: #4F4F4F;
	border-top: 0px solid #4F4F4F;
}
.mList2U .mList3{                
	font-size: 38px;             
	background-color: #828282;   
	border-top: 3px solid white; 
}                                
.mList2N .mList3{                
	font-size: 0px;
	background-color: #828282;
	border-top: 0px solid #828282;
}
</style>
<div id="menu" class="mList0N" onclick="mList(this,0)"> <!--mList(this,0)-->
				Меню
				<div class="mList1N mList1" onclick="mList(this,1)">
					П1                
					<div class="mList2">ПП2</div>  
					<div class="mList2">ПП3</div>  
				</div>             
				<div class="mList1">
					П2                
				</div>             
				<div class="mList1">
					П3               
				</div>             
				<div class="mList1N mList1" onclick="mList(this,1)">
					П4
					<div class="mList2N mList2" onclick="mList(this,2)">
						ПП1
						<div class="mList3">ППП1</div>
						<div class="mList3">ППП2</div>  
						<div class="mList3">ППП3</div>
					</div>
					<div class="mList2">ПП2</div>  
					<div class="mList2">ПП3</div>  
				</div>
			</div>
			<script>
				function mList(block,mListNum){
					if(event.currentTarget==event.target){
						if(block.classList.contains('mList'+mListNum+'U')){
							block.classList.remove('mList'+mListNum+'U'); 
							block.classList.add('mList'+mListNum+'N');
							for(var y = 0; y<20; y++){
								var curNum= mListNum+1;
								if(block.getElementsByClassName('mList'+curNum+'U')[y]!=null){
									block.getElementsByClassName('mList'+curNum+'U')[y].classList.add('mList'+curNum+'N');
									block.getElementsByClassName('mList'+curNum+'U')[y].classList.remove('mList'+curNum+'U');
									for(var k = 0; k<20; k++){
										var curNum2= mListNum+2;
										if(block.getElementsByClassName('mList'+curNum2+'U')[k]!=null){
										block.getElementsByClassName('mList'+curNum2+'U')[k].classList.add('mList'+curNum2+'N');
										block.getElementsByClassName('mList'+curNum2+'U')[k].classList.remove('mList'+curNum2+'U'); 
										};
									};
								};
							};
						}else{
							block.classList.remove('mList'+mListNum+'N'); 
							block.classList.add('mList'+mListNum+'U');
						};
					};
				};
			</script>