Строим бутстрэп аккордеон и хотим добавить класс ко всей панели

Я создаю бутстрэп-аккордеон, и когда я открываю панель, я хочу применить стиль ко всей панели, когда она открыта, а затем удалить ее, когда она закрыта. Я использую CSS и jQuery. У меня было несколько проблем, пытаясь сделать это; он добавляет класс к каждой панели, он не применяет класс вообще и т. д. Я должен признать, что я не лучший в jquery, но не мог бы кто-нибудь помочь, пожалуйста. Спасибо

Это html: 

    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    <i class="fa fa-chevron-down fa-lg"></i>
                    Stuff 1
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body text-muted">
                  Stuff.
            </div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading text-muted" role="tab" id="headingTwo">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    <i class="fa fa-chevron-down fa-lg"></i>
                    Stuff 2
                </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="panel-body text-muted">
                Stuff.
            </div>
        </div>
    </div>

Это jquery: 

$(document).ready(function(){
 $(".panel-heading").click(function(){
     $(".panel-default").toggleClass("panel-box-shadow");
 });
});
1 2
html jquery twitter-bootstrap accordion

1 ответ:

Можно использовать события Bootstrap collapse : 

$('.panel-collapse').on('shown.bs.collapse', function () {
  $(this).parent().addClass('.panel-box-shadow');
});

$('.panel-collapse').on('hidden.bs.collapse', function () {
  $(this).parent().removeClass('.panel-box-shadow');
});

$(this) в этом контексте ваш .panel-collapse div, который разрушается. Если вы используете parent() на этом элементе, вы получите свой .panel, а затем вы можете добавить или удалить класс из этой панели на соответствующем событии.

Вы также можете использовать show и hide события (вместо showed и hidden), если хотите.

Когда вы используете такие события, как click, mouseover и т.д. $(this) внутри этого события всегда будут ссылаться на clicked/hovered и т. д. элемент. Вы можно было бы использовать $(this).parent() в вашей функции вместо $(".panel-default"), но проблема в том, что при двойном щелчке на вашем .panel-heading он переключит класс panel-box-shadow, но ваш складной div будет открыт, поэтому всегда лучше использовать встроенные события Bootstrap.

1