我有一个用于导航的 jQuery UI Accordion 。我需要能够突出显示活跃的 parent 及其 3 个级别的 child 。 (见下图)
我进行了几次调整,但在定位事件菜单和使用正确的选择器方面遇到了问题。
fiddle :http://jsfiddle.net/abenjamin/njHCQ/
HTML
<ul id='master' class="accordion">
<li><a class="head" href="#">1</a>
<ul class="accordion main">
<li><a href="#">1 - 1</a>
<ul class="accordion sub">
<li><a href="#">1 - 1 - 1</a></li>
<li><a href="#">1 - 1 - 2</a></li>
<li><a href="#">1 - 1 - 3</a></li>
</ul>
</li>
<li><a href="#">1 - 2</a>
<ul class="accordion sub">
<li><a href="#">1 - 2 - 1</a></li>
<li><a href="#">1 - 2 - 2</a></li>
<li><a href="#">1 - 2 - 3</a></li>
</ul>
</li>
<li><a href="#">1 - 3</a>
<ul class="accordion sub">
<li><a href="#">1 - 3 - 1</a></li>
<li><a href="#">1 - 3 - 2</a></li>
<li><a href="#">1 - 3 - 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="head" href="#">1</a>
<ul class="accordion main">
<li><a href="#">1 - 1</a>
<ul class="accordion sub">
<li><a href="#">1 - 1 - 1</a></li>
<li><a href="#">1 - 1 - 2</a></li>
<li><a href="#">1 - 1 - 3</a></li>
</ul>
</li>
<li><a href="#">1 - 2</a>
<ul class="accordion sub">
<li><a href="#">1 - 2 - 1</a></li>
<li><a href="#">1 - 2 - 2</a></li>
<li><a href="#">1 - 2 - 3</a></li>
</ul>
</li>
<li><a href="#">1 - 3</a>
<ul class="accordion sub">
<li><a href="#">1 - 3 - 1</a></li>
<li><a href="#">1 - 3 - 2</a></li>
<li><a href="#">1 - 3 - 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="head" href="#">1</a>
<ul class="accordion main">
<li><a href="#">1 - 1</a>
<ul class="accordion sub">
<li><a href="#">1 - 1 - 1</a></li>
<li><a href="#">1 - 1 - 2</a></li>
<li><a href="#">1 - 1 - 3</a></li>
</ul>
</li>
<li><a href="#">1 - 2</a>
<ul class="accordion sub">
<li><a href="#">1 - 2 - 1</a></li>
<li><a href="#">1 - 2 - 2</a></li>
<li><a href="#">1 - 2 - 3</a></li>
</ul>
</li>
<li><a href="#">1 - 3</a>
<ul class="accordion sub">
<li><a href="#">1 - 3 - 1</a></li>
<li><a href="#">1 - 3 - 2</a></li>
<li><a href="#">1 - 3 - 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a class="head" href="#">1</a>
<ul class="accordion main">
<li><a href="#">1 - 1</a>
<ul class="accordion sub">
<li><a href="#">1 - 1 - 1</a></li>
<li><a href="#">1 - 1 - 2</a></li>
<li><a href="#">1 - 1 - 3</a></li>
</ul>
</li>
<li><a href="#">1 - 2</a>
<ul class="accordion sub">
<li><a href="#">1 - 2 - 1</a></li>
<li><a href="#">1 - 2 - 2</a></li>
<li><a href="#">1 - 2 - 3</a></li>
</ul>
</li>
<li><a href="#">1 - 3</a>
<ul class="accordion sub">
<li><a href="#">1 - 3 - 1</a></li>
<li><a href="#">1 - 3 - 2</a></li>
<li><a href="#">1 - 3 - 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
脚本
<script>
$(function() {
$( ".accordion" ).accordion({ active: false, collapsible: true, heightStyle : "content" });
});
</script>
最佳答案
一切正常
您的主题在事件状态下的保存颜色与正常状态下的颜色相同。
编辑您的主题或进行测试,在您包含主题的行之后添加以下内容:
.ui-state-active {
background: #00283C;
}
关于javascript - 我如何给活跃的 Accordion child 涂色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19815210/