jquery - 制作一棵树， parent 和路径突出显示

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

我创建了一个 fiddle ，如果没有 Javascript，突出显示将无法工作。不太好，但它有效。

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