Question

似乎已经提出了类似的问题，但它们并不适合我想要做的事情。

我正在制作一个键盘可访问的树小部件。无论选择哪个列表项都应该应用背景颜色，但我不希望将背景颜色应用于其子项。我该怎么做呢？这就是我现在所拥有的：

// javascript
$(rootLi).focus(function(event) {
    $(this).addClass('focusNode');
});

// css
.focusNode {
    background-color: orange;
}

然后所有的孩子都是橙色的。我还尝试将背景颜色应用于包含span显示文本的li，但是当我这样做时，嵌套树中的所有span元素也会突出显示。

我承认我的CSS非常弱。有人可以提供建议吗？谢谢！

修改

我被要求发布HTML。我认为我的问题非常简单，但我想它不会受到伤害：）

  <div id="treewidget">
    <ul role="tree" aria-activedescendant="rootItem" tabindex="0">
      <li id="rootItem" tabindex="0" role="treeItem" data-id="1" aria-expanded="true"
      aria-labelledby="contentFor1">
        <a href="javascript:void(0);" class="expanded"></a> <span id=
        "contentFor1">foo</span>

        <ul role="group">
          <li tabindex="0" role="treeItem" data-id="2" aria-expanded="true"
          aria-labelledby="contentFor2"><a href="javascript:void(0);" class=
          "expanded"></a><span id="contentFor2">bar</span></li>

          <li tabindex="0" role="treeItem" data-id="3" aria-expanded="true"
          aria-labelledby="contentFor3"><a href="javascript:void(0);" class=
          "expanded"></a><span id="contentFor3">baz</span></li>
        </ul>
      </li>
    </ul>
  </div>

Answer 1

重置子树上的bg颜色应该可以正常工作

// css
.focusNode ul {
    background-color: white; // original color
}

这是一个简化的小提琴http://jsfiddle.net/uFaUS/2/

这是比jQuery问题更多的css规则，焦点节点包含子项。

Answer 2

如果没有代码，我只能猜测，但看起来你要突出显示的li的孩子没有指定背景，所以他们的背景实际上是透明的。

Answer 3

您是否尝试将该类添加到第一个子span标记？它是这样的：

$(this).children("span").first().addClass("focusNode");

动态突出显示列表项而不突出显示其子项

3 个答案: