Question

我有简单的手风琴。这是我的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>

我的问题是，当我的手风琴显示时，所有折叠的标题将具有相同的颜色，除了活动标题或扩展标题，这将是唯一显示唯一不同颜色的标题。然后，当我再次单击另一个标题时，该扩展标题将具有不同的颜色，并且所有折叠的标题将使用相同的颜色设置样式。如何通过jQuery和amp;设置颜色？ CSS？请帮忙。感谢。

Answer 1

如果你正在使用jquery ui手风琴，也许这会有所帮助：

为任何标题着色：

.ui-accordion-header { background-color: blue; }

为活动标题着色：

.ui-accordion-header.ui-state-active { background-color: yellow; }

Answer 2

标题背景颜色

#accordion .ui-accordion-header { background: #fff; }

活动标题背景颜色

#accordion .ui-accordion-header.ui-state-active { background: #0c8d11; }

Answer 3

因此，要将活动元素设置为灰色和橙色：

$(".ui-accordion-header").css("background","grey") ;

$(".ui-accordion-header.ui-state-active ").css("background","orange") ;

Answer 4

请记住设置背景图像，或将其设置为none以仅使用颜色。

   .ui-state-default{
      background-color: #3173a5;
      background-image: none;
   }

如果您只想要对某些标题进行不同的着色，则可以向其中添加一个类

<h3>Regular Header</h3>
<div>Regular Content</div>

<h3 class="special">Special Header</h3>
<div>Special Content</div>

然后将样式附加到该类

   .special.ui-state-default{
      background-color: #3173a5;
      background-image: none;
   }

Answer 5

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

如何通过脚本和放大器设置jQuery手风琴标题颜色CSS

5 个答案: