各ページとその親の間の関係を簡単に確認できる、ツリーとして表示される凝ったメニューを作成したかったのです。
うまくいくにはほど遠いですが、あなたの助けとアイデアが必要です。
これが私がしたことです: 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');
上記と同じ例を保持します。「ページ 4」から下にある最初の行が行き過ぎていることがわかります (実際には、li要素全体を使用しています)。「4-3ページ」の手前で止めてほしいのですが…
すべての構造を変更する必要があるのか、それとも別の方法で処理する必要があるのか わかりません。いろいろやってみたけど、どれもうまくいかなかった…
ご協力いただきありがとうございます ！