Bootstrap 3 手风琴样式打开/关闭 [英] Bootstrap 3 accordion styling on open/closed
问题描述
试图对 bs3 手风琴进行风格化...我在标题和正文中添加了一个图像.我设法在关闭时设置黑色标题文本,在悬停和/或打开时设置蓝色文本.
如何在悬停和/或打开时更改面板标题"的背景颜色?我已经尝试了很多事情,但没有结果.通过添加/删除样式,这将成为仅 jquery 的解决方案吗?
<div class="panel-heading"><h4 class="panel-title"><a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#accordion1_2">1. 这里有一些标题</a><div id="accordion1_2" class="panel-collapse collapse"><div class="panel-body">示例条目文本在此处
.面板常见问题{边框颜色:#dddddd;}.panel-faq .panel-heading {颜色:#333333;背景:#f5f5f5 url('/assets/img/faq-question.png') 不重复 10px 中心;左边距:45px;边框颜色:#dddddd;}.panel-default >.panel-heading + .panel-collapse .panel-body {边框顶部颜色:#dddddd;}.panel-default >.panel-footer + .panel-collapse .panel-body {边框底部颜色:#dddddd;}.panel-faq .panel-body {背景: url('/assets/img/faq-answer.png') 不重复 40px 20px;左边距:75px;}.panel-faq .accordion-toggle, .panel-faq a.accordion-toggle:hover{颜色:#428bca;文字装饰:无;}.panel-faq .accordion-toggle.collapsed {颜色:#333333;}
由于我无法在 css 中做任何事情,所以我继续使用了一些 jquery.对于任何感兴趣的人,您可以向整个 div 添加/删除活动类,然后以这种方式应用样式.
$('.panel-faq').on('show.bs.collapse', function () {$(this).addClass('active');});$('.panel-faq').on('hide.bs.collapse', function () {$(this).removeClass('active');});
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.
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;
}
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屋!