Question

当点击一个菜单项时，我正在尝试更改导航菜单中其他菜单项的不透明度。我目前试过这个破坏了我的jQuery代码：

$("#navItem1").click(function(){
        $("#navItem2").css("opacity","0.3");  
        $("#navItem3").css("opacity","0.3");  
        $("#navItem4").css("opacity","0.3");  
        $("#navItem5").css("opacity","0.3");  
    });

另外在旁注 - 我只为一个菜单项做了这个例子，但是当我将它应用到所有5个菜单项时，有更好的编码方式。

这是我得到多远的一个小问题：http://jsfiddle.net/9D33X/

Answer 1

$(".cmNavItem a").on('click', function(e){
    e.preventDefault();
    $(this).css('opacity','1')
           .closest('.cmNavItem')
           .siblings('.cmNavItem')
           .find('a')
           .css('opacity', '0.3')
});

FIDDLE

Answer 2

像这样：

SEE DEMO

$(document).ready(function(){

    $("#cmNav li").click(function(){
        $("#cmNav li").not(this).css("opacity",.3);  
        $(this).css("opacity",1);   
    });

    $("#cmNavContainer").animate({left: 0}, 1000);

}）;

Answer 3

您可以执行以下两个选项之一

1）而不是：

    $("#navItem2").css("opacity","0.3");  
    $("#navItem3").css("opacity","0.3");  
    $("#navItem4").css("opacity","0.3");  
    $("#navItem5").css("opacity","0.3");

您可以使用

$("#navItem2,#navItem3,#navItem4,#navItem5").css("opacity","0.3");

2）将类选择器添加到项目菜单

<ul>

<li class="items">Item1</li>
<li class="items">Item2</li>
<li class="items">Item3</li>
</lu>

和他们

$(".items").click(function(){
$(this).css("opacity",0.3);
});

单击此菜单项时，如何更改其他菜单项的不透明度？

3 个答案: