jQuery幻燈片菜單

Question

我試圖製作一個菜單，當點擊時滑下子菜單項（+改變背景顏色）。 當點擊不同的菜單項時，另一個打開應該關閉（子菜單項後退）。我使用下面的HTML代碼， （我躲在使用dispay的SUB1和SUB2：無;）

請查看代碼http://jsfiddle.net/kxvKA/

目前所有幻燈片開在一起，我想一個開一次，另一次被點擊。首先應關閉

<ul class="nav"> 
      <li class="mainnav">MAINNAV</li> 
        <li class="sub1">SUB1</li> 
        <li class="sub2">SUB2</li> 
</ul> 
<ul class="nav"> 
      <li class="mainnav">MAINNAV2</li> 
        <li class="sub1">SUB1</li> 
        <li class="sub2">SUB2</li> 
</ul> 

和JQuery代碼

$(".mainnav").on("click", function(){ 
    $(".sub1, .sub2").slideDown("fast"); 
    $(".mainnav").animate({ 
     backgroundColor: "#3A3A3A", 
     }, 500); 
}); 

Answer 1

在任何jQuery的事件處理程序，你會得到一個事件對象有很多有用的參數。其中之一是currentTarget，它是對觸發事件的DOM元素的引用，所以即使原始選擇器應用於多個元素，也可以使用它對與之交互的元素執行操作。

$(".mainnav").on("click", function(event) { 
    $(".sub1, .sub2").slideUp("fast"); 
    $(event.currentTarget).siblings(".sub1, .sub2").slideDown("fast"); 
    $(event.currentTarget).animate({ 
     backgroundColor: "#3A3A3A", 
     }, 500); 
}); 

查看更新後的小提琴：http://jsfiddle.net/kxvKA/5/

編輯：哦，如果你想動畫顏色，你將不得不使用一個插件或jQuery用戶界面，請參閱：jQuery animate backgroundColor