У меня есть элемент HTML с такой же структурой, но я хотел, чтобы мой jquery влиял только на конкретный элемент, который я нажал, вместо этого он затрагивает все элементы в DOM. Вот моя скрипка.
//HTML Code
<div class="category">
<h3>This is the title</h3>
<ul>
<li>Sub menu one</li>
<li>Sub menu two</li>
<li>Sub menu three</li>
<li>Sub menu four</li>
<li>Sub menu five</li>
<li>Sub menu six</li>
<li>Sub menu seven</li>
</ul>
</div>
<div class="category">
<h3>This is the title</h3>
<ul>
<li>Sub menu one</li>
<li>Sub menu two</li>
<li>Sub menu three</li>
<li>Sub menu four</li>
<li>Sub menu five</li>
<li>Sub menu six</li>
<li>Sub menu seven</li>
</ul>
</div>
//jquery
$(function(){
$('.category > h3').click(function(){
$('.category > ul').slideToggle("fast");
});
$('.category > h3').click(function(event){
$(this).toggleClass('clicked')
});
});
Попробуй это:
$(function(){
$('.category > h3').click(function(){
$(this).next().slideToggle("fast");
});
использование
$(this).next('ul').slideToggle("fast");
Вместо
$('.category > ul').slideToggle("fast");
Или как это, может быть немного менее восприимчивым к изменениям
$(function(){
$('.category > h3').click(function(){
$(this).find('.category > ul').slideToggle("fast");
});
использование
$('.category > h3').click(function(){
$(this).next("ul").slideToggle("fast");
});
Для этого вы можете использовать следующую функцию, также лучше комбинировать два события click для лучшей производительности, например
$(function(){
$('.category > h3').click(function(){
$(this).next("ul").slideToggle("fast");
$(this).toggleClass('clicked')
});
});