制作一个父母和路径突出显示的树

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');

现在保持与上面相同的例子.您将看到从"第4页"开始的第一行走得太远(事实上它正在使用整个li元素).我希望它能在"第4 - 3页"前停下来......

我不知道是否必须改变我的所有结构,或者我是否应该以另一种方式处理它.我尝试了很多东西,但没有任何效果......

谢谢你的帮助 !

Answer 1

我创建了一个小提琴，如果没有 Javascript，突出显示就无法工作。不是那么好，但它有效。

CSS3-option nth-of-type 仅受支持，如下所示，此解决方案也是如此：

 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 文件中定义的深度。