0

Подскажите как c jquery добавить класс в елементу при открытие аккордеона. То есть: когда у аккордеона появляется класс show - в другой блок'block-test' добавляется класс

$(function(){
    if ($('.collapse').hasClass('show') === true) {
        $('.block-test').addClass('myClass');
    }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<div class="container p-5">


    <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Button with data-bs-target</button>

    <div class="collapse mt-5" id="collapseExample">
        <div class="card card-body"> Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
        </div>
    </div>

    <div class="mt-5 block-test">block-test</div>

</div>

Редактор кода: https://jsfiddle.net/synapse3/w8amhfpn/2/

1
  • Попробуйте убрать сравнение === true.
    – Max Watson
    Commented 19 нояб. 2021 в 13:04

1 ответ 1

3

Вы можете делать это и без jquery. В бутстрап есть кастомные слушатели, например show.bs.collapse срабатывает, когда аккордеон раскрывается. Пример нужного вам кода:

const myCollapsible = document.getElementById('collapseExample')
myCollapsible.addEventListener('show.bs.collapse', () => {
    document.querySelector('.block-test').classList.add('myClass')
})

Пример с использованием Jquery:

$('#collapseExample').on('show.bs.collapse', () => {
    $('.block-test').addClass('myClass')
})

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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