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