构建一个 bootstrap 手风琴并想向整个面板添加一个 class

Question

我正在构建一个 bootstrap 手风琴，当我打开一个面板时，我想在打开时将样式应用于整个面板，然后在关闭时将其删除。我正在使用 CSS 和 jQuery。我在尝试这样做时遇到了一些问题；它将 class 添加到每个面板，它根本不应用 class 等等。我必须承认我在 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");
 });
});

Answer 1

您可以使用 Bootstrap collapse events:

$('.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，然后您可以在适当的事件中从该面板添加或删除 class。

如果需要，您还可以使用显示和隐藏事件（而不是显示和隐藏）。

当您使用 click、mouseover 等事件时，此事件中的 $(this) 将始终引用 clicked/hovered 等元素。你可以在你的函数中使用 $(this).parent() 而不是 $(".panel-default") 但问题是当你双击你的 .panel-heading 它会切换 panel-box-shadow class 但是您的可折叠 div 将被打开，因此最好使用 Bootstrap 内置事件。

Answer 2

我知道这已经过时了并且已经得到回答但是参考 https://getbootstrap.com/docs/4.0/components/collapse/

show.bs.collapse and hide.bs.collapse

比

工作得更好

shown.bs.collapse and hidden.bs.collapse

如果你有转换

构建一个 bootstrap 手风琴并想向整个面板添加一个 class

Building a bootstrap accordion and want to add a class to whole panel

jquery

html

twitter-bootstrap

accordion

bootstrap-accordion