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

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