Динамически выделять элемент списка, не выделяя его потомков - PullRequest
Новая
       30

Динамически выделять элемент списка, не выделяя его потомков

0 голосов
/ 15 июля 2011

Кажется, что были заданы похожие вопросы, но они не совсем соответствуют тому, что я пытаюсь сделать.

Я делаю виджет дерева доступным с клавиатуры.Какой бы элемент списка ни был выбран, к нему должен быть применен цвет фона, но я не хочу, чтобы этот цвет фона применялся к его дочерним элементам.Как мне это сделать?Вот что у меня сейчас: 

// 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>

Ответы [ 3 ]

1 голос
/ 15 июля 2011

Сброс цвета bg на поддеревьях должен работать 

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

Вот упрощенная скрипка на нем http://jsfiddle.net/uFaUS/2/

Это больше правила CSS, чем проблема с jQuery, узел фокуса оборачивает вложенные элементы.

0 голосов
/ 15 июля 2011

Вы пытались добавить класс в первый дочерний тег span? Это было бы что-то вроде этого: 

$(this).children("span").first().addClass("focusNode");
0 голосов
/ 15 июля 2011

Без кода я могу только догадываться, но похоже, что дочерние элементы li, которые вы хотите выделить, не имеют заданного фона, поэтому их фон на самом деле прозрачен.

...