親とパスがハイライトされたツリーを作成する

Question

私はいくつかのファンシーメニューをツリーとして表示し、各ページとその親の関係を簡単に見たいと思っていました。

これは遠くないですが、私はあなたの助けとアイデアが必要です。ここで

は私がやったことです： http://jsfiddle.net/bXCHn/6/

したがって、たとえば、あなたが "ページ4 - 3 - 2" を合わせると、 - 及び "4ページ"、それが "3ページ4" をハイライト表示されます。 これは基本的なHTMLとCSSであり、jQueryスクリプトを削除しても機能します。

jQueryを使用すると、ツリーの各以前の要素のパス（li罫線）を強調表示するクラスを追加できます。これは、アカウント内のナビゲーションの最初のレベルになりません。

$(this).prevAll('li:not(.first-lvl-item)').addClass('hover-prev-item'); 

は、今すぐ上記と同じ例を続けます。 "page 4"から下に行く最初の行があまりにも遠すぎることがわかります（実際にはli要素全体を使用しています）。私は "ページ4 - 3"の前に停止したいと思っています...

私はすべての私の構造を変更する必要があるかどうか、私は別の方法でそれを処理する必要がありますか分かりません。私は多くのことを試しましたが、何も効果がありませんでした...

ありがとうございました！

Answer 1

JavaScriptを使用せずにハイライト表示が機能しないフィーリングを作成しました。それは良いことではありませんが、うまくいきます。

CSS3-オプションn番目-の型は、ちょうど示すように、このソリューションであり、サポートされています：

Feature  Chrome Firefox (Gecko) Internet Explorer Opera Safari 
Basic support 1.0  3.5 (1.9.1)  9.0     9.5  3.1 

私は設計上の手直しをしたと私は前に置かスパンの量に、それをベースレベルカウントの場合： http://jsfiddle.net/bXCHn/10/

残っていることは何ですか？私がnth-of-typeセレクタを使った方法をリファクタリングし、javascriptでそれを実行しようとしました。現在のところ、CSSファイルで定義している深いレベルのサポートだけです。