Question

我有一个用于导航的jQuery UI手风琴。我需要能够突出显示活跃的父母和它的3个级别的孩子。（见下图）

我采取了一些波动，但我在定位活动菜单和使用正确的选择器方面遇到了麻烦。

example image

小提琴：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/

Answer 2

我没有选择你的颜色并且没有进行调整，但正如我在评论中所写，我只使用了课程ui-state-active。

<强>示例

http://jsfiddle.net/njHCQ/2/

CSS

#master .ui-state-active { 
    background-color: #0f0;
}
#master .main .ui-state-active {
    background-color: #00f;
}
#master .main .sub .ui-state-active {
    background-color: #f00;    
}

如何在活跃的手风琴儿童中着色？

2 个答案: