jQuery slide/toggle menu

Question

Новичок в JS/jQuery здесь. Первая проблема: когда страница загружается или она обновляется, все суб-подменю моргнуты примерно на 0,5 сек, чтобы они могли «спрятаться». Я поместил сценарий сначала в конец тега body, но после этого мигания я поместил его в «head», так что есть ли способ заставить его на самом деле скрыть, например, действительно скрывать, чтобы не отображаться, когда страница в процессе? Вторая проблема - когда я нажимаю на синее или зеленое квадратное меню, плавно не скользит. Это похоже на эффект отскока. Это из-за «скрыть»? И последняя проблема связана с функцией slideDown. Где я должен использовать slideUp, чтобы вернуть его в положение, в котором он скрывается?

jQuery(document).ready(function($) 
 
{ 
 
\t $(".raid ul").hide(); 
 
    $(".raid").hide(); 
 
    
 
    $(".wod").one("click", function() 
 
\t { 
 
     $(".wod ul li").slideDown(200); 
 
    }); 
 
    
 
    $(".mop").one("click", function() 
 
\t { 
 
     $(".mop ul li").slideDown(200); 
 
    }); 
 
    
 
    $(".hfc").click(function() 
 
\t { 
 
     $(".hfc").addClass('x'); 
 
     $(".hfc ul").slideToggle(200); 
 
    }); 
 
    $(".soo").click(function() 
 
\t { 
 
     $(".soo ul").slideToggle(200); 
 
    }); 
 
});

ul 
 
{ 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#progress 
 
{ 
 
    padding: 0; 
 
    float: left; 
 
    width: 200px; 
 
    height: inherit; 
 
    background-color: rgba(0, 0, 0, 0.2); 
 
    text-align: center; 
 
    box-shadow: 2px 2px 2px 0px black; 
 
    background-repeat: no-repeat; 
 
} 
 

 
h1 
 
{ 
 
    margin-top: 8px; 
 
    border-bottom: 4px solid #00c99a; 
 
    padding-bottom: 4px; 
 
} 
 

 
.expansion 
 
{ 
 
    text-align-last: center; 
 
    width: inherit; 
 
    height: 108px; 
 
    
 
} 
 

 
.expansion:first-child 
 
{ 
 
    margin-top: -20px; 
 
} 
 

 
.mop, .wod 
 
{ 
 
    width: inherit; 
 
    height: inherit; 
 
} 
 

 
.wod > ul 
 
{ 
 
margin-top: 90px; 
 
} 
 

 
.mop > ul 
 
{ 
 
margin-top: 90px; 
 
} 
 

 
.wod 
 
{ 
 
    border-bottom: 5px solid black; 
 
    background-color: blue; 
 
} 
 

 
.mop 
 
{ 
 

 
    border-bottom: 5px solid black; 
 
    background-color: green; 
 
} 
 

 
.raid > ul 
 
{ 
 
    padding-bottom: 10px; 
 
} 
 

 
h3 
 
{ 
 
    font-size: 20px; 
 
    padding: 10px 0 10px 0; 
 
} 
 

 
.nhm 
 
{ 
 
    display: inline-block; 
 
    text-align: center; 
 
    padding: 4px 20px 1px 20px; 
 
    border: 2px solid white; 
 
    border-radius: 50px; 
 
    cursor: default; 
 
    color: white; 
 
    font-weight: 300; 
 
} 
 

 
.hfc-progress, .soo-progress, 
 
{ 
 
    list-style-type: none; 
 
    text-align: center; 
 
    margin: 0; 
 
    padding: 0; 
 
    cursor: default; 
 
    color: white; 
 
} 
 

 
.hfc, .soo 
 
{ 
 
    color: limegreen; 
 
    background-color: rgba(37, 65, 23, 0.5); 
 
} 
 

 
.hfc:hover, .soo:hover 
 
{ 
 
    cursor: pointer; 
 
    color: greenyellow; 
 
} 
 

 
.x 
 
{ 
 
    color: black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
 
<div id="progress"><h1>Progress</h1> 
 
       <div id="expansion"> 
 
        <ul> 
 
         <li class="expansion wod"><br /> 
 
          <ul> 
 
           <li class="raid hfc"><h3>Hellfire Citadel ↓</h3>  
 
            <ul> 
 
             <li class="hfc-progress">Hellfire Assault 
 
              <ul> 
 
               <li class="nhm hfcn">N</li> 
 
               <li class="nhm hfch">H</li> 
 
               <li class="nhm hfcm">M</li> 
 
              </ul> 
 
              </li> 
 
            </ul> 
 
           </li> 
 
           
 
          </ul> 
 
         </li> 
 
         
 
         <li class="expansion mop"><br /> 
 
         <ul> 
 
           <li class="raid soo"><h3>Siege of Orgrimmar↓</h3>  
 
            <ul> 
 
             <li class="soo-progress">Immerseus 
 
              <ul> 
 
               <li class="nhm soon">N</li> 
 
               <li class="nhm sooh">H</li> 
 
               <li class="nhm soom">M</li> 
 
              </ul> 
 
             </li> 
 
            </ul> 
 
           </li> 
 
          
 
         </ul> 
 
        </li> 
 
       </ul> 
 
     </div> 
 
</div>

Answer 1

Если вы действительно хотите элементы скрыты, использование CSS. CSS может иметь свойства, как

.raid ul { 
    display: none; 
} 
.raid { 
    display: none; 
} 

вместо вызова hide() функцию в JQuery. Таким образом, если вы включите CSS в раздел главы и держите JS в нижней части экрана, мигание не произойдет (потому что браузер будет скрывать их по умолчанию)