Hello.
There is a drop-down menu on the entire width of the screen. There were initially 2 panels ( festival , media ). Now I need to add a third drop-down panel ( calendar ).
And since I did not write the code, it was very difficult for me to parse (and the code was written very crookedly), but somehow I got to the bottom of it and understood (not fully).
And most likely ( 99% ) the problem here
case 'festival': visiOne = "media"; break; case "media": visiOne = 'festival'; break; case 'all': There is not written switch case condition for calendar
Even if I write the case "calendar" I don’t know what value I should give visiOne (for everything to work) because I don’t really understand this particular part of the code
Below in the example I wrote and left this part as it is and how you see the first and last block opens and closes without problems, but only the second has problems (and most likely the problem is in the code where I indicated). The middle one also opens and closes without problems, but if you simultaneously open another block after it or open it later on another block, then you can see the bugs.
In CSS, there are no problems. You can not look there for a lot of code, but there are no problems there for sure.
And if somebody proposes to simplify this code by any means I will be grateful with
I ask for help.
$(document).ready(function () { "use strict"; function mineMenu(thisElenent) { var visiOne, visiTwo , visiThree; var thisHide = thisElenent; switch(thisHide) { case 'festival': visiOne = "media"; break; case "media": visiOne = 'festival'; break; case 'all': visiOne = 'festival', visiTwo = "media", visiThree = "calendar"; if ($('#'+visiOne).is(":visible")){ $('#'+visiOne).hide().animate({top: '-400px'}, 500); } if ($('#'+visiTwo).is(":visible")){ $('#'+visiTwo).hide().animate({top: '-400px'}, 500); } if ($('#'+visiThree).is(":visible")){ $('#'+visiThree).hide().animate({top: '-400px'}, 500); } $('#menuClose').hide(); break; } if ($('#'+visiOne).is(":visible")){ $('#'+visiOne).hide().animate({top: '-400px'}, 500); } if ($('#'+visiTwo).is(":visible")){ $('#'+visiTwo).hide().animate({top: '-400px'}, 500); } if ($('#'+thisHide).is(":visible")){ $('#'+thisHide).animate({top: '-400px'}, 500, function(){$('#'+thisHide).hide();}); } else { $('#'+thisHide).show().animate({top: '0rem'}, 500); } return false; } $('#artistbtn').click(function(){ mineMenu('festival'); $('#menuClose').show(); $(".rotate-art").toggleClass("down"); $(".rotate-media , .rotate-calendar").removeClass("down"); }); $('#mediabtn').click(function(){ mineMenu('media'); $('#menuClose').show(); $(".rotate-media").toggleClass("down"); $(".rotate-art , .rotate-calendar").removeClass("down"); }); $('#calendarbtn').click(function(){ mineMenu('calendar'); $('#menuClose').show(); $(".rotate-calendar").toggleClass("down"); $(".rotate-art , .rotate-media").removeClass("down"); }); $('#menuClose').click(function(){ mineMenu('all'); $(".rotate-media, .rotate-art ,rotate-calendar").removeClass("down"); }); }); .header { height: 47px; position: fixed; top: 0; left: 0; width: 100%; z-index: 5000; background-color: #191919; /*Opacity start*/ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=80); -moz-opacity: 0.80; -khtml-opacity: 0.8; opacity: 0.8; /*Opacity end*/ font-weight: 400; letter-spacing: 3.4px; text-align: center; } .header h1 { margin: 0; margin-left: 60px; } .header h1 a { float: left; line-height: 1.5; width: auto; max-height: 47px; color: #fff; } .header h1 a img { width: auto; height: 47px; } .header nav { width: 60%; margin: 0 auto; position: relative; z-index: 5000; } .header nav .menu { position: relative; display: flex; justify-content: space-around; text-decoration: none; list-style-type: none; margin: 0; height: 47px; line-height: 3; } .header nav .menu .hide .lang-panel { display: none; } .header nav .menu .hide .lang-panel ul { display: flex; /* flex-grow: 1; */ width: 100%; list-style-type: none; } .header nav .menu .hide .lang-panel ul li { flex-grow: 1; } .header nav .menu li a { text-decoration: none; color: #fff; } .header nav .menu #artistbtn a .fas { left: 8%; position: absolute; top: 55%; color: #c9ac8c; line-height: 20px; transition: all 0.5s; } .header nav .menu #mediabtn { position: relative; } .header nav .menu #mediabtn a .fas { right: 37.5%; position: absolute; top: 55%; color: #c9ac8c; line-height: 20px; transition: all 0.5s; } .header nav .menu #calendar { position: relative; } .header nav .menu #calendar a .fas { right: 37.5%; position: absolute; top: 55%; color: #c9ac8c; line-height: 20px; transition: all 0.5s; } .rotate-art { -moz-transition: all, 0.5s, cubic-bezier(0, 0, 1, 1); -webkit-transition: all, 0.5s, cubic-bezier(0, 0, 1, 1); transition: all, 0.5s, cubic-bezier(0, 0, 1, 1); -o-transition: all, 0.5s, cubic-bezier(0, 0, 1, 1); } .rotate-media { -moz-transition: all, 0.5s, cubic-bezier(0, 0, 1, 1); -webkit-transition: all, 0.5s, cubic-bezier(0, 0, 1, 1); transition: all, 0.5s, cubic-bezier(0, 0, 1, 1); -o-transition: all, 0.5s, cubic-bezier(0, 0, 1, 1); } .rotate-calendar { -moz-transition: all, 0.5s, cubic-bezier(0, 0, 1, 1); -webkit-transition: all, 0.5s, cubic-bezier(0, 0, 1, 1); transition: all, 0.5s, cubic-bezier(0, 0, 1, 1); -o-transition: all, 0.5s, cubic-bezier(0, 0, 1, 1); } .rotate-art.down { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .rotate-media.down { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .rotate-calendar.down { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .subMenu ul { display: block; } .subMenu { position: absolute; top: 0; width: 100%; height: 168px; background-color: #191919; /*Opacity start*/ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=80); -moz-opacity: 0.80; -khtml-opacity: 0.8; opacity: 0.8; z-index: 98; } .subMenu ul { height: 100%; padding-top: 47px; list-style: none; display: flex; margin-left: 24vw; } .subMenu li { position: relative; float: left; width: 121px; height: 71px; margin-top: 22px; margin-left: 40px; padding: 0px; border-radius: 5px; border: solid 3px #C9AC8C; box-sizing: border-box; } .subMenu li:first-child { margin-left: 0; } .subMenu li a { display: flex; flex-wrap: wrap; justify-content: center; width: 102%; height: 102%; margin-top: -1%; margin-left: -1%; text-decoration: none; font-size: 12px; font-weight: bold; letter-spacing: 2.2px; text-align: center; color: #D3D3D3; box-sizing: border-box; cursor: pointer; transition: all 0.3s; } #menuClose { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 97; } #festival, #calendar, #media { display: none; top: -200px; padding-bottom: 35px; position: fixed; } <link href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header class="header" id="menu"> <nav> <ul class="menu"> <li id="artistbtn"><a href="#">Festival<i class="fas fa-sort-down rotate-art"></i></a></li> <li id="calendarbtn"><a href="#">Calendar<i class="fas fa-sort-down rotate-calendar"></i></a></li> <li><a href="#">Location</a></li> <li id="mediabtn"><a href="javascript:void(0);">Gallery<i class="fas fa-sort-down rotate-media"></i></a></li> <li><a href="#">News</a></li> <li><a href="#">Contacts</a></li> </ul> </nav> </header> <!-- submenu dropdown --> <div class="subMenu" id="festival"> <ul> <li><a href="javascript:void(0);">Mission</a></li> <li><a href="javascript:void(0);">Characters</a></li> <li><a href="javascript:void(0);">Festival Team</a></li> <li><a href="javascript:void(0);">Volunteers</a></li> </ul> </div> <div class="subMenu" id="media"> <ul> <li><a href="javascript:void(0);">Mission</a></li> <li><a href="javascript:void(0);">Characters</a></li> <li><a href="javascript:void(0);">Festival Team</a></li> <li><a href="javascript:void(0);">Volunteers</a></li> </ul> </div> <div class="subMenu" id="calendar"> <ul> <li><a href="javascript:void(0);">Calendar</a></li> </ul> </div> <div id="menuClose"></div> 