如何通过脚本和 CSS 设置 jQuery 手风琴标题颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11377792/
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
How to set jQuery accordion header color through script & CSS
提问by Thomas
I have simple accordion. Here is my HTML code.
我有简单的手风琴。这是我的 HTML 代码。
<div id="accordion">
<div>
<h3 id="a1"><a href="#">First</a></h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3 id="a2"><a href="#">Second</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3 id="a3"><a href="#">Third</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>
My question is, when my accordion shows, then all collapsed headers will have the same color, except the active header or the expanded header, which will be the only ones showing a only different color. Then, when I click again on another header, that expanded header will have different color and all collapsed headers will be styled with that same color. How can I set the color through jQuery & CSS? Please help. Thanks.
我的问题是，当我的手风琴显示时，所有折叠的标题将具有相同的颜色，除了活动标题或展开的标题，它们将是唯一显示不同颜色的标题。然后，当我再次单击另一个标题时，展开的标题将具有不同的颜色，并且所有折叠的标题都将使用相同的颜色进行样式设置。如何通过 jQuery 和 CSS 设置颜色？请帮忙。谢谢。
回答by Henrik Janbell
If you're using jquery ui accordion, perhaps this will help:
如果您使用 jquery ui 手风琴，也许这会有所帮助：
For coloring any header:
为任何标题着色：
.ui-accordion-header { background-color: blue; }
For coloring the active header:
为活动标题着色：
.ui-accordion-header.ui-state-active { background-color: yellow; }
回答by user2944793
header background color
标题背景颜色
#accordion .ui-accordion-header { background: #fff; }
active header background color
活动标题背景颜色
#accordion .ui-accordion-header.ui-state-active { background: #0c8d11; }
回答by ben.IT
Thus, to set to grey and to orange the active element :
因此，要将活动元素设置为灰色和橙色：
$(".ui-accordion-header").css("background","grey") ;
$(".ui-accordion-header.ui-state-active ").css("background","orange") ;
回答by Thomas Smart
remember to set background-image too, or set it to none to just use the colour.
记住也要设置背景图像，或者将其设置为无以仅使用颜色。
.ui-state-default{
background-color: #3173a5;
background-image: none;
}
if you only want some of the headers to be coloured differently you can add a class to them
如果您只希望某些标题的颜色不同，您可以向它们添加一个类
<h3>Regular Header</h3>
<div>Regular Content</div>
<h3 class="special">Special Header</h3>
<div>Special Content</div>
then attach the style to only that class
然后将样式仅附加到该类
.special.ui-state-default{
background-color: #3173a5;
background-image: none;
}
回答by user3062
Inside jquery-ui-1.9.2.custom.min.css locate this section and make the change:
在 jquery-ui-1.9.2.custom.min.css 中找到此部分并进行更改：
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
border: 0px solid #d3d3d3;
background: #e6e6e6 url("images/ui-bg_glass_75_e6e6e6_1x400.png") 50% 50% repeat-x;
font-weight: normal;
color: #555;
}
