Question

我想把一些花哨的菜单显示为树，我们可以很容易地看到每个页面与父母之间的关系。

距离工作不远，但我需要你的帮助和想法。

因此，例如，如果您将鼠标悬停在“第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文件中定义的深层次。