我想把一些精美的菜单显示为一棵树,在那里我们可以很容易地看到每个页面和他们父母之间的关系.
离工作不远,但我需要你的帮助和想法.
这是我做的：
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页”前停下来……
我不知道是否必须改变我的所有结构,或者我是否应该以另一种方式处理它.我尝试了很多东西,但没有任何效果……
谢谢你的帮助 ！
解决方法
我创造了一个小提琴,如果没有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文件中定义的深层次.
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
