jQuery Bootstrap 3 手风琴样式打开/关闭
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20592441/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 accordion styling on open/closed
提问by user756659
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.
试图风格化 bs3 手风琴......我在标题和正文中添加了一个图像。我设法在悬停和/或打开时在关闭和蓝色文本上设置黑色标题文本。
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?
如何在悬停和/或打开时更改“面板标题”的背景颜色？我已经尝试了很多事情，但没有结果。通过添加/删除样式，这将是仅 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;
}
回答by user756659
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.
因为我无法在 css 中做任何事情，所以我继续和一些 jquery。对于任何感兴趣的人，您可以向整个 div 添加/删除活动类，然后以这种方式应用样式。
$('.panel-faq').on('show.bs.collapse', function () {
$(this).addClass('active');
});
$('.panel-faq').on('hide.bs.collapse', function () {
$(this).removeClass('active');
});
回答by Ted Percival
To do this the AngularJS way (no JQuery) you can put a conditional class on the accordion-group.
为此，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;
}
This way the activeclass is applied to the whole accordion-groupwhen it is open and the panel-headingdiv (generated by bootstrap-ui) can be styled with a specific CSS selector.
通过这种方式，active类accordion-group在打开时应用于整体，并且panel-heading可以使用特定的 CSS 选择器设置div（由 bootstrap-ui 生成）的样式。
回答by maxshuty
Here is the CSS only solution I came up with...
这是我想出的唯一 CSS 解决方案......
The jQuery solution wasn't great because if a user clicks too quick the styles can get thrown off.
jQuery 解决方案不是很好，因为如果用户点击太快，样式可能会被抛弃。
Just target your headers class when it's notcollapsed:
只需在未折叠时定位您的标头类：
.panel-heading:not(.collapsed) {
/*Your styles*/
}
The HTML I have:
我拥有的 HTML：
<div class="collapsed panel-header" data-toggle="collapse" data-parent="panelParent" data-target="targetPanel">Header</div>
Finally to answer the question about hover, it's as simple as:
最后回答关于悬停的问题，很简单：
.panel-heading:hover {
/*Your styles*/
}
回答by Mehul Gohil
Try This:
尝试这个：
For Hover Effect:
对于悬停效果：
.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;
}
if background not getting overriden, you can also try:
如果背景没有被覆盖，您也可以尝试：
background:#f5f5f5 url('/assets/img/faq-question.png') no-repeat 10px center !important;
