Question

简单问题：我使用的是没有任何UI主题的Accordion（只是使用我自己的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

请帮忙吗？

Answer 1

我也在努力解决这个问题。我删除了围绕我的a.nav链接和指定标题的'h3标签：'。nav'。在我的CSS中，我包含了“a.ui-state-active”来改变开放式手风琴div的标题。对我来说，前缀“a”有所不同。

Answer 2

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

使用“活动”控件。不确定它是否有效themeroller。小部件具有用于创建菜单的所有“标题”的运行计数。索引0是第一个xxx1，索引1是第二个xxx2等...

Answer 3

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

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

只需更改所需的颜色或背景即可！

jQuery UI - 手风琴 - 样式活动标题？

3 个答案: