0

на странице существует элемент

var viewh2 = $(".block_peptides:last-child .block-item .title_view h2")

у него есть margin-bottom=10px

необходимо при клике открывать список и делать margin-bottom = 40px

при повторном клике - список закрывается и нужно чтобы margin-bottom обратно делался 10px

сначала я сделал так:

 `  $(".title_view h2").click(function() {
    $(this).toggleClass("on");
    $(this).parent().parent().find(".block_content").slideToggle(300);
    viewh2.css("margin-bottom", "40px");
    return false;
    });`

список открывается марджин = 40px Но закрывается и марджин остается 40px Хотел решить проблему вот так:

    if ($(".block_content").is(":hidden")){
    viewh2.css("margin-bottom", "10px");
}else if ($(".block_content").is(":visible")) {
    viewh2.css("margin-bottom", "40px");
}

не помогает... Подскажите как правильно надо делатть?

1 ответ 1

0

В css создать два класса:

.active {
    margin-bottom: 40px;
}
.hidden {
    margin-bottom: 10px;
}

В html присвоить класс hidden и в js переключать классы. Этот код надо вставить в onclick обработчик:

viewh2.toggleClass('active');
viewh2.toggleClass('hidden');
3
  • 1
    viewh2.toggleClass('active hidden');
    – user176262
    23 июл 2018 в 20:52
  • Вынужден не согласиться ведь в какой то момент оба класса будут деактивированны 23 июл 2018 в 21:01
  • Eliot Alderson, да спасибо так работает, хотя интерес не пропал как же на чистом js правильно делать) 23 июл 2018 в 21:53

Ваш ответ

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

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