Я хотел бы применить slideToggle
только к классу, который ближе всего к триггерному изображению. Я не хочу иметь несколько ID для запуска нескольких версий slideToggle
.
Я пробовал использовать .closest
но безрезультатно
.closest
не является родителем вашего изображения. Попробуйте использовать это:
$(this).closest('section').find('.content').slideToggle();
$('.image').click(function(){
$(this).parent().next().slideToggle();
});
Другой вариант для случаев, когда .content
не следующий элемент
$('.image').click(function(){
$(this).closest('section').find('.content').slideToggle();
});
class="content"
Я спрашиваю причину, потому что могут быть случаи, когда контент не является элементом .next
Должно это сделать:
$('.image').click(function(){
$(this).parents('section').find('.content').slideToggle();
});
Это то, что вы ищите?
$('.image').click(function(){
$(this).parent().siblings('.content').slideToggle();
});
Я использую функцию.parent(), чтобы перейти на тот же уровень, что и контент, в этом случае выбран h3. Затем я буду искать ближайшего родственника с содержимым класса. Он не будет искать дальше, когда найдет подходящий класс.
Пытаться:
$('.image').click(function(){
$(this).parent().next('.content').slideToggle();
});
.closest()
не будет работать, потому что это только смотрит в DOM. Вам нужно подняться на один уровень до элемента <h3>
а затем выбрать следующий элемент, <div class="content">
. Вы также можете подменить .closest('h3')
для .parent()
в моем примере. Кроме того, в вашем случае .next('.content')
будет эквивалентно .next()
.
.content
не является элементом .next
. Есть ли способ нацеливаться на класс как на следующий?
.content
, .next
будет применяться, только если следующий элемент имеет этот класс.
closest()
?