Подменю JQuery Animate, но закрыть другое одновременно.

Question

У меня есть горизонтальное меню с несколькими подменю. Если вы переключили одно подменю и попытаетесь открыть другое, первый закроется, а другой откроется.

Мне удалось это сделать, но они не открываются и не закрываются одновременно. Вместо этого он сначала открывает новую, затем закрывает другую.

Вы можете посмотреть на полный код здесь: Jsfiddle

Соответствующий HTML:

<li> <a href="#" class="has-dropdown"><i class="fa fa-suitcase"></i> Dropdown</a> 
    <ul class="dropdown"> 
     <li><a href="#">Action</a> 
     </li> 
     <li><a href="#">Another action</a> 
     </li> 
     <li><a href="#">Something else here</a> 
     </li> 
     <li><a href="#">Separated link</a> 
     </li> 
    </ul> 
</li> 

Соответствующие CSS:

.sidebar-nav li ul { 
    max-height: 0; 
    margin: 0; 
    padding: 0; 
    background: #F5F5F5; 
    overflow: hidden; 
    transition: all 0.5s ease-out; 
} 
.sidebar-nav li ul.show { 
    max-height: 1000px; 
    list-style: none; 
    transition: all 0.5s ease-in; 
} 

Соответствующие JS:

$(".sidebar-nav .has-dropdown").on("click", function (e) { 
    e.preventDefault(); 
    var dropdown = $(this).parent().find(".dropdown"); 

    if (!$(dropdown).hasClass("show")) { 
     $(".dropdown").removeClass("show"); 
     $(dropdown).addClass("show"); 
    } else $(".dropdown").removeClass("show"); 

}); 

Answer 1

свойство, которое вы анимируете, - max-height. Но вы определяете max-height: 1000px, когда в раскрывающемся списке есть только 250px. Вам нужно определить точную max-height или как можно более низко, как:

.sidebar-nav li ul.show { 
    max-height: 250px; 
} 

DEMO