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 that you have read and understand our privacy policy and code of conduct.

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