我可以根据孩子的活动类选择元素的父级吗？

Question

我修改了手风琴以使我的页面适合作为固定的联系表单，当您单击手风琴选项卡时，表单向右滑动。一切正常。但是，该选项卡对于页面来说有点大，我想让它更小，反映文件选项卡。我已经想出如何重新调整选项卡本身的大小，但我需要做的是删除父项的背景颜色，因为它位于选项卡的正下方。

Here is a fiddle to show what I mean

标签的紫色部分是我想保留的颜色，黑色是我想要带走的颜色。我面临的问题是，当我拿走标签的黑色时，它也会在打开时带走内容的颜色。

我认为手风琴中有一个与众不同的类可以提供帮助，当你打开标签然后关闭它时，会生成一个类（class =“collapse”）并将其添加到锚标记中，如下所示：

<div class="contact">
        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
                <div class="panel-heading">
                     <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="collapsed">
                      Contact Us
                    </a>
                  </h4>

                </div>
                <div id="collapseOne" class="panel-collapse collapse">
                    <div class="panel-body">
                        <!--form goes here-->
                    </div>
                </div>
            </div>
        </div>
    </div>

我希望删除<div class="panel panel-default"></div>上的背景颜色是否可以通过锚标记上添加的类来删除它？是

到此：

Answer 1

你不需要做任何其他事情或者不需要太复杂。只需按以下方式更改CSS：

.panel.panel-default {
 background-color: transparent;   
 }
 .panel-default .panel-body {
 background:#000;
 }

<强> Fiddle

如果您希望在展开时使用颜色填充面板标题，请使用jquery。

$('#myCollapsible').on('shown.bs.collapse', function () {
// do something… add css background etc.
});

$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something… remove css background or set to transparent etc.
});