5

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

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

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

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

谢谢你的帮助 ！

4

1 回答 1

2

我创建了一个小提琴，如果没有 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 文件中定义的深度级别。

于 2013-04-09T17:02:56.000 回答