Bootstrap 3手风琴的开/关样式 [英] Bootstrap 3 accordion styling on open/closed

问题描述

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

Trying to stylize bs3 accordions... I had added an image to the title and the body. I have managed to set black title text on close and blue text on hover and/or open.

如何在悬停和/或打开时更改面板标题"的背景颜色?我已经尝试了很多事情，但都没有结果.通过添加/删除样式，这将成为仅jquery的解决方案吗?

How can I change the background color of 'panel-heading' on hover and/or open? I have tried quite a few things with no results. Is this going to be a jquery only solution by adding/removing the styles?

<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;
}

推荐答案

由于我无法在css中执行任何操作，因此我只能继续执行一些jquery.对于感兴趣的任何人，您都可以在整个div中添加/删除活动类，然后以这种方式应用样式.

Since I was unable to do anything in css only I went ahead and some jquery. For anyone interested you can add/remove an active class to the entire div then apply styling that way.

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

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

这篇关于Bootstrap 3手风琴的开/关样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！