Форум

TANDEROID · #1 (**permalink**) 06.01.2017, 16:35

Сделал выпадающее меню, все вроде как работает но вот есть проблема с закрытием. Грубо говоря, если открыть меню, открыть П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>

рони · #2 (**permalink**) 06.01.2017, 18:10

TANDEROID,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>
<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;
  cursor: pointer;
}
#menu div{
  font-size: 0px;
  border-top: 0;
  transition:         all 0.5s ease;
  -o-transition:      all 0.5s ease;
  -moz-transition:    all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}

#menu .big > div, #menu.big > div{
  font-size: 38px;
  border-top: 3px solid white;
}
#menu.big > div{
  background-color: #4F4F4F;
}
#menu.big > div > div{
  background-color: #696969;
}
#menu.big > div > div > div{
  background-color: #828282;
}

.open:before {
  content: "+";
}
.open.big:before {
  content: "-";

}
</style>
<div id="menu" class="open" >
        Меню
        <div class="open" >
          П1
          <div class="mList2">ПП2</div>
          <div class="mList2">ПП3</div>
        </div>
        <div class="mList1">
          П2
        </div>
        <div class="mList1">
          П3
        </div>
        <div class="open" >
          П4
          <div class="open" >
            ПП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>
[].forEach.call(document.querySelectorAll(".open"), function(block) {
    block.addEventListener("click", function(event) {
        if (block != event.target) return;
        event.stopPropagation();
        block.classList.toggle("big");
        [].forEach.call(block.querySelectorAll(".big"), function(big) {
            big.classList.remove("big")
        })
    })
});
      </script>


</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript