jquery - 用 parent 和路径突出树

我想将一些精美的菜单显示为一棵树，在这里我们可以轻松地看到每个页面与其 parent 之间的关系。

离工作很近，但我需要您的帮助和想法。

这是我所做的:
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页”的前面...

我不知道我是否必须更改所有结构，还是应该以其他方式处理它。我尝试了很多事情，但没有任何效果。

谢谢你的帮助 !

最佳答案

我创建了一个 fiddle ，其中没有Java脚本就无法突出显示。不太好，但是有效。

如图所示，仅支持CSS3选项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文件中定义的深层次。

关于jquery - 用 parent 和路径突出树，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15903286/