Question

我正在尝试制作一个菜单，在点击时滑下子菜单项（+更改背景颜色）。单击其他菜单项时，另一个打开应该关闭（子菜单项向后滑动）。我正在使用下面的html代码，（我使用dispay：none隐藏了sub1和sub2;）

当所有幻灯片一起打开时，我希望一次打开一个，然后点击另一个幻灯片。第一个应该关闭

<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元素的引用，因此即使原始选择器应用于多个元素，您也可以使用它对与之交互的元素执行操作。 / p>

$(".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

jQuery幻灯片菜单

1 个答案: