Целевой ближайший класс .click jQuery

0

Я хотел бы применить slideToggle только к классу, который ближе всего к триггерному изображению. Я не хочу иметь несколько ID для запуска нескольких версий slideToggle.

Я пробовал использовать .closest но безрезультатно

DEMO http://jsfiddle.net/LstNS/12/

  • 0
    Вы читали документацию на closest() ?
  • 0
    То, как вы реализуете это простое взаимодействие, неверно.
Показать ещё 1 комментарий
Теги:
toggle
slidetoggle

5 ответов

0
Лучший ответ

.closest не является родителем вашего изображения. Попробуйте использовать это:

$(this).closest('section').find('.content').slideToggle();

http://jsfiddle.net/LstNS/16/

Поделиться
2 
$('.image').click(function(){
    $(this).parent().next().slideToggle();
});

DEMO

Другой вариант для случаев, когда .content не следующий элемент

$('.image').click(function(){
   $(this).closest('section').find('.content').slideToggle();
});

DEMO

Поделиться
  • 0
    спасибо, есть ли способ указать это для применения только к class="content" Я спрашиваю причину, потому что могут быть случаи, когда контент не является элементом .next
  • 0
    @TheApptracker: я только что создал пример с учетом того, что вы сказали. Я понял, что мой пример такой же, как у Карла Андре Ганьона. Вы можете принять его ответ.
Показать ещё 1 комментарий
2

Должно это сделать:

$('.image').click(function(){
    $(this).parents('section').find('.content').slideToggle();
});

http://jsfiddle.net/LstNS/13/

Поделиться
0

Это то, что вы ищите?

$('.image').click(function(){
    $(this).parent().siblings('.content').slideToggle();
});

Я использую функцию.parent(), чтобы перейти на тот же уровень, что и контент, в этом случае выбран h3. Затем я буду искать ближайшего родственника с содержимым класса. Он не будет искать дальше, когда найдет подходящий класс.

jsFiddle

Поделиться
0

Пытаться:

$('.image').click(function(){
    $(this).parent().next('.content').slideToggle();
});

Пример jsFiddle

.closest() не будет работать, потому что это только смотрит в DOM. Вам нужно подняться на один уровень до элемента <h3> а затем выбрать следующий элемент, <div class="content">. Вы также можете подменить .closest('h3') для .parent() в моем примере. Кроме того, в вашем случае .next('.content') будет эквивалентно .next().

Поделиться
  • 0
    спасибо, это, похоже, не работает, если .content не является элементом .next . Есть ли способ нацеливаться на класс как на следующий?
  • 0
    Правильно, указав .content , .next будет применяться, только если следующий элемент имеет этот класс.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню