Question

我正在制作一个自举手风琴，当我打开一个面板时，我想在打开时将样式应用到整个面板，然后在关闭时将其移除。我正在使用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");
 });
});

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，然后您可以在适当的事件中添加或删除此面板中的类。

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

当您使用click，mouseover等事件时，此事件内的$(this)将始终引用clicked / hovered等元素。您可以在函数中使用$(this).parent()而不是$(".panel-default")，但问题是，当您双击.panel-heading时，它会切换panel-box-shadow类，但您的可折叠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手风琴，并希望在整个面板中添加一个类

2 个答案: