jquery - 构建自举 Accordion 并想向整个面板添加一个类

Question

我正在构建一个自举 Accordion ，当我打开一个面板时，我想在打开时将样式应用于整个面板，然后在关闭时将其删除。我正在使用 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 :

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

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

$(this) 在此上下文中是您的 .panel-collapse div，它正在折叠。如果您在此元素上使用 parent()，您将获得您的 .panel，然后您可以在适当的事件发生时从该面板添加或删除类。

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

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