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