jquery - ツリーのノードにスタイルを追加します（ "li"）

Question

私は次のツリーを持っています-http ：//jsfiddle.net/anirbankundu/wzEBW/

このツリーには、n個のノードを含めることができます。ユーザーが単一のノードにカーソルを合わせると、ノードの背景色を変更する必要があります。基本的に、ホバークラスをliに追加する必要があります。どの時点でも、1つのノードのみを強調表示できます。私が適用しているスタイルは、基本的にliの後続の子を追加することです。（フィドルリンクを参照）

何か助けはありますか？

Answer 1

子ノードの強調表示を「元に戻す」ことができます。

li:hover {
   background: red;
}

li:hover li {
   background: white;
}

Answer 2

「div」の周りに「a」要素をラップしました。

<script id="itemTmpl" type="text/html">
    <li>
        <div>
            <a href="#" data-bind="click: $root.toggleChildren, text: showChildren() ? ' - ' : ' + '"></a>
            <a href="#" data-bind="text: name"></a> 
        </div>
        <ul data-bind="visible: showChildren, template: { name: 'itemTmpl', foreach: children }"></ul>
    </li>
 </script>

そして、cssに少し変更を加えます。

li ul li div:hover {
    background-color: #C0DDF0;
}​

動作しているようですhttp://jsfiddle.net/twTcw/

それが役に立てば幸い！

Answer 3

動作しているように見えますが、これは少し単純で、将来レベルを追加するとランダム性が低下する可能性があります。

li ul li:hover { background-color: #C0DDF0; }

Answer 4

CSSでの使用

ul li ul li.hover {
    background-color: #C0DDF0;
}

それ以外の

ul li ul li:hover {
    background-color: #C0DDF0;
}

そしてJavaScript（jQuery）で次のように記述します。

$("ul li ul li","#pnlDestinations").live("mouseenter", function() {
    $(this).addClass("hover").siblings("li").removeClass("hover");
}).live("mouseleave", function() {
    $(this).removeClass("hover");
});

これにより、スクリプトのブラウザー間の互換性が実現されます。こちらの更新されたスクリプトをご覧ください。サンプルスクリプトにはサブリストが含まれていないため、現在は機能しません。ただし、デモンストレーション用の動作バージョンを確認したい場合は、hearから見つけてください。