Есть блоки
<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>
Пытаюсь присвоить блокам #cat-mini-item событие:
$.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"});
});
});
Но данное событие присваивается, почему-то только первому (Компьютеры)
Идентификатор на странице может быть только в единственном экземпляре, используйте классы:
$.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>
Так как id
- уникальный идентификатор, если css
может обращаться к нескольким элементам с одинаковым id
, то javascript - нет.
Все дело в том, что вы пытаетесь присвоить значение по id
, который должен быть уникальным, для того, чтобы все работало, нужно использовать 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>
Фрилансер или Digital-агентство - Как сделать правильный выбор?
Начал изучать jquery, вот хочу написать скрипт для перевода десятичных дробей в обыкновенные
ЗдравствуйтеПодскажите, пожалуйста, как при выборе checkbox с id="ru"активировать блок
Доброго времени сутокСтоит такая задача: вытащить текст из html в php