7

我有简单的手风琴。这是我的 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 & CSS 设置颜色？请帮忙。谢谢。

4

5 回答 5

13

如果您使用的是 jquery ui 手风琴，也许这会有所帮助：

为任何标题着色：

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

为活动标题着色：

.ui-accordion-header.ui-state-active { background-color: yellow; }
于 2012-07-08T00:16:17.510 回答
7

标题背景颜色

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

活动标题背景颜色

#accordion .ui-accordion-header.ui-state-active { background: #0c8d11; }
于 2013-11-13T14:15:09.657 回答
3

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

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

$(".ui-accordion-header.ui-state-active ").css("background","orange") ;
于 2013-02-06T12:32:13.780 回答
1

记得也设置背景图像，或者将其设置为无以仅使用颜色。

   .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;
   }
于 2013-08-05T02:58:03.483 回答
0

在 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;
}
于 2014-04-18T15:45:50.100 回答