Question

试图将bs3手风琴风格化......我在标题和正文中添加了一个图像。我设法在悬停和/或打开时在关闭和蓝色文本上设置黑色标题文本。

如何在悬停和/或打开时更改'panel-heading'的背景颜色？我尝试了很多没有结果的事情。通过添加/删除样式，这是否只是一个jquery解决方案？

<div class="panel panel-faq">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#accordion1_2">
                1. Some title goes here
            </a>
        </h4>
    </div>
    <div id="accordion1_2" class="panel-collapse collapse">
        <div class="panel-body">
                sample entry text goes here
        </div>
    </div>
</div>


.panel-faq{
    border-color: #dddddd;
}
.panel-faq .panel-heading {
    color: #333333;
    background:#f5f5f5 url('/assets/img/faq-question.png') no-repeat 10px center;
    padding-left: 45px;
    border-color: #dddddd;
}

.panel-default > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #dddddd;
}

.panel-default > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #dddddd;
}

.panel-faq .panel-body {
    background: url('/assets/img/faq-answer.png') no-repeat 40px 20px;
    padding-left: 75px;
}

.panel-faq .accordion-toggle, .panel-faq a.accordion-toggle:hover{
    color:#428bca;
    text-decoration:none;
}

.panel-faq .accordion-toggle.collapsed {
    color:#333333;
}

Answer 1

因为我无法在CSS中做任何事情，所以我继续进行了一些jquery。对于任何感兴趣的人，你可以添加/删除一个活动的类到整个div然后应用样式。

    $('.panel-faq').on('show.bs.collapse', function () {
         $(this).addClass('active');
    });

    $('.panel-faq').on('hide.bs.collapse', function () {
         $(this).removeClass('active');
    });

Answer 2

要做到这一点，AngularJS方式（没有JQuery）你可以在accordion-group上放置一个条件类。

<div accordion-group is-open="first.open"
     ng-class="{'active': first.open}">
  <div accordion-heading>First Section</div>
  <div>First content</div>
</div>


.active[accordion-group] .panel-heading {
  background-color: black;
  color: white;
}

这样，active类在打开时应用于整个accordion-group，并且panel-heading div（由bootstrap-ui生成）可以使用特定的CSS选择器设置样式。

Answer 3

试试这个：

悬停效果：

.panel-faq .panel-heading:hover {

   color: #333333;    
   background:#f5f5f5 url('/assets/img/faq-question.png') no-repeat 10px center;    
   padding-left: 45px;    
   border-color: #dddddd;

}

如果背景没有被覆盖，您也可以尝试：

background:#f5f5f5 url('/assets/img/faq-question.png') no-repeat 10px center !important;

Answer 4

以下是我提出的CSS解决方案......

jQuery解决方案并不是很好，因为如果用户点击太快，样式就会被抛弃。

只有在崩溃时才定位您的标题类：

.panel-heading:not(.collapsed) { 
/*Your styles*/
}

我的HTML：

<div class="collapsed panel-header" data-toggle="collapse" data-parent="panelParent" data-target="targetPanel">Header</div>

最后回答关于悬停的问题，它很简单：

.panel-heading:hover {
/*Your styles*/
}

开启/关闭时Bootstrap 3手风琴造型

4 个答案: