單擊此菜單項時，如何更改其他菜單項的不透明度？

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

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> 

and t下襬

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