jQuery: изменить класс div с помощью onclick на нескольких div's

Question

У меня есть код jQuery, который: onlick на #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) s