1

我正在尝试制作一个在单击时向下滑动子菜单项（+更改背景颜色）的菜单。单击不同的菜单项时，应关闭另一个打开的菜单项（子菜单项向后滑动）。我正在使用下面的 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 );
});
4

1 回答 1

0

在任何 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 UI，请参阅：jQuery animate backgroundColor

于 2013-05-26T00:50:56.460 回答