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

【问题标题】：How can I change the opacity of other menu items when this menu item is clicked?单击此菜单项时，如何更改其他菜单项的不透明度？
【发布时间】：2013-05-07 19:18:16
【问题描述】：

我试图在单击菜单项时更改导航菜单中其他菜单项的不透明度。我目前已经尝试过这会破坏我的 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/

【问题讨论】：

标签： jquery click opacity

【解决方案1】：

你可以选择这两个选项之一

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

【讨论】：

【解决方案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);

});

【讨论】：

【解决方案3】：

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

FIDDLE

【讨论】：