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

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 个菜单项时，是否有更好的编码方式。

这是我得到了多远的jfiddle：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')
});

小提琴

Answer 2

像这样：

看演示

$(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);
});