jquery動畫子菜單但關閉其他同時打開

我有一個包含多個子菜單的水平菜單。如果您切換了一個子菜單並嘗試打開另一個子菜單，則第一個子菜單將關閉，另一個打開。jquery動畫子菜單但關閉其他同時打開

我設法做到了這一點，但是他們不能同時打開/關閉。相反，它首先打開新的 - 然後關閉另一個。

你可以看一下完整的代碼在這裏：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"); 

});

來源

2015-09-23 bardur

這是因爲由您'MAX-height'屬性設置爲這樣的高值這個動畫的延遲。您應該嘗試將其設置爲較低的值（子菜單將實現的最大高度） [此處爲工作jsFiddle]（http://jsfiddle.net/7zjtu5jj/6/） – PitaJ

謝謝！將其更改爲更低的數字，現在它完美無缺！ – bardur

的您正在動畫的屬性是max-height。但是當您的下拉列表只有250px時，您正在定義max-height: 1000px。您需要定義一個確切的max-height或更低的可能，如：

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

DEMO

來源

2015-09-23 00:26:27 lmgonzalves

jquery動畫子菜單但關閉其他同時打開

回答

相關問題