Как изменить непрозрачность других пунктов меню при нажатии этого пункта меню?

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> 

и t кромка

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