jQuery 滑动菜单

Question

我正在尝试制作一个菜单，该菜单在单击时会向下滑动子菜单项(+更改背景颜色)。单击不同的菜单项时，另一个打开的菜单项应关闭(子菜单项向后滑动)。我正在使用下面的 html 代码，(我使用 dispay:none 隐藏了 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 );
});

查看更新的 Fiddle:http://jsfiddle.net/kxvKA/5/

编辑:哦，如果你想要动画颜色，你将不得不使用插件或 jQuery UI，参见:jQuery animate backgroundColor