0

Добрый день, нужно реализовать выпадающие блоки в верстке (сразу говорю в js/jquery разбираюсь на уровне начинающего), есть блок с фото краткой инфой и ссылкой (стрелочкой вниз) при нажатии на стрелочку блок будет увеличиваться и раскрывать еще больше информации. Думал реализовать все это добавлением класса с увеличенной высотой по нажатию на стрелку. Вот таким вот способом:

$(".select").click(function(e) {
    e.preventDefault();
    $(".select-element").toggleClass("add-height");
});

Но возник баг что класс с высотой применяется ко всем элементам и получается что они все едут. Нужен другой вариант реализации jquery функции. Подскажите возможные пути решения.

1 ответ 1

4

Если блок .select-element вложен в .select, то стоит попробовать использовать this:

$(".select").click(function(e) {
    e.preventDefault();
    // this для указания на нажатый элемент
    // closest для поиска ближайшего родителя
    $(this).closest(".select-element").toggleClass("add-height");
});
3
  • Там все немного иначе, блок "select-element" это обертка а "select" это кнопка внутри этой обертки (получается что при нажатии на кнопку к обертке добавляется класс который увеличивает ее высоту), и это не первый опыт с использованием this и он почему то не хочет с ним работать, может что то с логикой не так? 2 сен 2016 в 7:46
  • @ConstantineShibaev поправил ответ
    – lexxl
    2 сен 2016 в 8:24
  • Огромное спасибо тебе, очень выручил. Уже хотел делать на основе аккордеона без js. 2 сен 2016 в 18:40

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.