javascript - 我如何给活跃的 Accordion child 涂色？

Question

我有一个用于导航的 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>

Answer 1

一切正常

您的主题在事件状态下的保存颜色与正常状态下的颜色相同。

编辑您的主题或进行测试，在您包含主题的行之后添加以下内容:

.ui-state-active {
    background: #00283C;
}

这是演示:http://jsfiddle.net/njHCQ/1/