jQuery UI - 手风琴 - 为活动标题设置样式？答案

【问题标题】：jQuery UI - Accordion - Styling active header?jQuery UI - 手风琴 - 为活动标题设置样式？
【发布时间】：2009-11-19 18:21:16
【问题描述】：

简单的问题：我使用 Accordion 没有任何 UI 主题（只是准系统，使用我自己的 CSS）。

到目前为止，一切都很好，只是我不知道如何为当前选定的标题设置“活动”样式。

jQuery 代码：

$("#menu").accordion({
  event: "mouseover",
  header: "a.top"
});

HTML 代码：

<a href="#" class="top">XXX1</a>
<div class="sub">
   <a href="#">Subheading 1</a>
   <a href="#">Subheading 2</a>
   <a href="#">Subheading 3</a>
</div>

<a href="#" class="top">XXX2</a>
<div class="sub">
   <a href="#">Subheading 1</a>
   <a href="#">Subheading 2</a>
   <a href="#">Subheading 3</a>
</div>

这很好用，除了我找不到不使用 ThemeRoller 来定义活动标题样式的方法。

在我的 CSS 中手动设置以下样式无效：

.ui-state-active
.ui-widget-content .ui-state-active
.ui-state-active a
.ui-state-active a:link
.ui-state-active a:visited

请帮忙？

【问题讨论】：

你能确认你的 CSS 样式没有被 jQuery 重置吗？我用 .ui-state-active 尝试了这个并且能够改变样式
您找到解决方案了吗？

标签： jquery coding-style accordion

【解决方案1】：

我也为此苦苦挣扎。我去掉了围绕我的 a.nav 链接的 h3 标签并指定了标题：'.nav'。在我的 CSS 中，我包含了“a.ui-state-active”来更改打开的手风琴 div 的标题。对我来说，在前面加上“a”会有所不同。

【讨论】：

【解决方案2】：

$("#menu").accordion({
    header: "a",
    event: mouseover,
    active:0
});

使用“活动”控件。不确定它是否在没有themeroller 的情况下工作。该小部件对用于创建菜单的所有“标题”进行计数。索引 0 是第一个 xxx1，索引 1 是第二个 xxx2，依此类推...

【讨论】：

【解决方案3】：

对于仍在使用 jQuery-ui 的任何人，只需将其添加到您的 CSS 中：

.ui-accordion-header-active {
    background: red !important;
}

只需更改您想要的颜色或背景！

【讨论】：