There are blocks

<div id="cat-mini-item"> <div id="cat-mini-itemName"> Компьютеры </div> <div id="cat-mini-itemOpen"></div> <div id="cat-mini-list"> <a href=""> <div id="cat-mini-list-item"> Ноутбуки </div> </a> <a href=""> <div id="cat-mini-list-item"> Системные блоки </div> </a> <a href=""> <div id="cat-mini-list-item"> Моноблоки </div> </a> </div> </div> <a href=""> <div id="cat-mini-item-one"> <div id="cat-mini-itemName"> Мониторы </div> </div> </a> <div id="cat-mini-item"> <div id="cat-mini-itemName"> Манипуляторы и аксессуары </div> <div id="cat-mini-itemOpen"></div> <div id="cat-mini-list"> <a href=""> <div id="cat-mini-list-item"> Клавиатуры </div> </a> <a href=""> <div id="cat-mini-list-item"> Компьютерные мыши </div> </a> <a href=""> <div id="cat-mini-list-item"> Коврики </div> </a> </div> </div>

I'm trying to assign an event to the # cat-mini-item blocks:

 $.each($('#cat-mini-item'), function(index, value) { $(this).on("click", function(){ $(this).children('#cat-mini-list').slideToggle(300); $(this).css({"height":"auto"}); $(this).css({"padding-bottom":"0"}); }); });

But this event is assigned, for some reason, only to the first (Computers)

  • The thing is that you are trying to assign a value by id , which must be unique, so that everything works, you need to use the class - Sergey Glazirin
  • @SergeyGlazirin thanks - Arsen Tatraev February

3 answers 3

The identifier on the page can be only in a single copy, use the classes:

 $.each($('.cat-mini-item'), function(index, value) { $(this).on("click", function() { $(this).children('.cat-mini-list').slideToggle(300); $(this).css({ "height": "auto" }); $(this).css({ "padding-bottom": "0" }); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="cat-mini-item"> <div class="cat-mini-itemName"> Компьютеры </div> <div class="cat-mini-itemOpen"></div> <div class="cat-mini-list"> <a href=""> <div class="cat-mini-list-item"> Ноутбуки </div> </a> <a href=""> <div class="cat-mini-list-item"> Системные блоки </div> </a> <a href=""> <div class="cat-mini-list-item"> Моноблоки </div> </a> </div> </div> <a href=""> <div class="cat-mini-item-one"> <div class="cat-mini-itemName"> Мониторы </div> </div> </a> <div class="cat-mini-item"> <div class="cat-mini-itemName"> Манипуляторы и аксессуары </div> <div class="cat-mini-itemOpen"></div> <div class="cat-mini-list"> <a href=""> <div id="cat-mini-list-item"> Клавиатуры </div> </a> <a href=""> <div class="cat-mini-list-item"> Компьютерные мыши </div> </a> <a href=""> <div class="cat-mini-list-item"> Коврики </div> </a> </div> </div>

    Since id is a unique identifier, if css can refer to several elements with the same id , javascript is not.

      The thing is that you are trying to assign a value by id , which must be unique, in order for everything to work, you need to use the class

       $.each($('.cat-mini-item'), function(index, value) { $(this).on("click", function() { $(this).children('.cat-mini-list').slideToggle(300); $(this).css({ "height": "auto" }); $(this).css({ "padding-bottom": "0" }); }); }); 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="cat-mini-item"> <div id="cat-mini-itemName"> Компьютеры </div> <div class="cat-mini-itemOpen"></div> <div class="cat-mini-list"> <a href=""> <div class="cat-mini-list-item"> Ноутбуки </div> </a> <a href=""> <div class="cat-mini-list-item"> Системные блоки </div> </a> <a href=""> <div class="cat-mini-list-item"> Моноблоки </div> </a> </div> </div> <a href=""> <div class="cat-mini-item-one"> <div class="cat-mini-itemName"> Мониторы </div> </div> </a> <div class="cat-mini-item"> <div class="cat-mini-itemName"> Манипуляторы и аксессуары </div> <div class="cat-mini-itemOpen"></div> <div class="cat-mini-list"> <a href=""> <div class="cat-mini-list-item"> Клавиатуры </div> </a> <a href=""> <div class="cat-mini-list-item"> Компьютерные мыши </div> </a> <a href=""> <div class="cat-mini-list-item"> Коврики </div> </a> </div> </div>