jQuery的：改變類的多個div的

Question

使用的onclick一個div我有一個jQuery代碼：點擊數上#icon切換父母類，如果之前點擊的onclick對身體的變化而變化的類了。

我需要做的是對＃ITEM5或＃ITEM4喜歡它的點擊#icon點擊後同樣的事情發生。

<div id="header_wrap"> 
    <div id="logo"></div> 
    <div class="contact" id="ccontainer"> 
     <div id="form"></div> 
     <div id="icon"><span id="getintouch">GET IN TOUCH</span></div> 
    </div> 

    <div id="menu_wrap"> 
     <ul id="menu"> 
      <li id="item1"><a href="#">Home</a></li> 
      <li id="item2"><a href="#">About us</a></li> 
      <li id="item3"><a href="#">What we do</a></li> 
      <li id="item4"><a href="#">Portfolio</a></li> 
      <li id="item5"><a href="#">Contact us</a></li> 
     </ul> 
    </div> 
</div> 

jQuery代碼....我試着寫我自己添加的功能，但我似乎無法得到它的工作。與JS/JQ的經驗非常少。

$('#icon').on('click', function(e){ 
    $(this).parent() 
     .toggleClass('contact') 
     .toggleClass('contactexpand'); 
}); 

$('body').on('click', function(e){ 
    $('#ccontainer') 
     .removeClass('contactexpand') 
     .addClass('contact'); 
}); 

$('#ccontainer').on('click', function(e){ 
    e.stopPropagation(); 
}); 

Answer 1

你必須調用event.stopPropagation從點擊處理程序，以防止它「沸騰」起來DOM（即，防止它激活所有祖先元素上的點擊事件）。

  $(document).ready(function(){ 
      $('#icon, ul li').on('click', function(event){ 
       event.stopPropagation(); 
       $('#icon').parent() 
       .toggleClass('contact') 
       .toggleClass('contactexpand');    
      }); 
      $('body').on('click', function(e){ 

       $('#ccontainer') 
       .removeClass('contactexpand') 
       .addClass('contact'); 
      }); 
     }); 

Answer 2

更改JS來：

$('#icon, #ul > li').on('click', function(e){ 
    $("#ccontainer") 
     or $(this).parent() *not entirely sure what you wanted to get* 
    .toggleClass('contact') 
    .toggleClass('contactexpand'); 
}); 



$('body:not(#icon, #ul > li)').on('click', function(e){ 
    $('#ccontainer') 
    .removeClass('contactexpand') 
    .addClass('contact'); 
}); 


$('#ccontainer').on('click', function(e){ 
    e.stopPropagation(); 
}); 

的#ul > li是指所有#item(number)小號