jquery - 复杂的嵌套 UL 导航

标签 jquery html css

我正在尝试将三级 UL 变成易于使用的导航系统。

我的想法是让第一个 UL 显示 LI,但隐藏 UL UL 和 UL UL UL,以及它们各自的 LI。

我希望有人能够点击 LI 的顶部,然后在该 LI 中显示 UL。

然后的想法是父 UL 与其 LI 一起隐藏,但不是我刚刚选择的子 UL。

如果然后单击另一个 LI,则显示该 LI 的子 UL 及其各自的 LI。

效果是每次只显示一个 UL。

我知道这很复杂,我无法理解这将如何完成 - 我猜测是 CSS 和 jQuery 的组合,我尝试了各种东西并搜索了很多东西,因此我求助于此。

如果有人对我正在谈论的内容以及如何实现它有任何想法,那就太好了,因为我什至不知道从哪里开始。


编辑

我会将 UL 放在固定宽度的 div 中,因此我可以在未使用的 UL 上使用溢出:隐藏和负值来“伪隐藏”。

最佳答案

这是我在 JSFiddle 中完成的一个小模型,您只需要寻求一些非常规的解决方法即可实现这一目标。

是的,您将需要一些 jQuery 来实现它,我只是为了示例而使用悬停实现它,您可以使用您需要的事件,这只是主体:

$('.subdropdown').hover(
    function() { $(this).parent().parent().css({'visibility': 'hidden'});
    $(this).css({'visibility': 'visible'});},
    function() { $(this).parent().parent().css({'visibility': 'visible'});}
);​

希望这对您有所帮助。

关于jquery - 复杂的嵌套 UL 导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13155906/

相关文章:

javascript - 获取 CSS 位置转换不对窗口缩放使用react

javascript - 第二次单击按钮时如何重复@keyframes?

javascript - jQuery:是否可以在另一个 getJSON 请求中使用 getJSON 请求?

html - 浏览器窗口缩小时页脚与内容重叠

javascript - 使用 div 制作 Facebook 风格的头像

html - 如何获取纯文本代码

css - 为什么下面提到的十六进制颜色代码在视觉上与 6 位十六进制代码具有相同的颜色?

javascript - jquery slider 背景颜色

java 如何转义字符串中的重音字符

html - Flexbox:在没有嵌套的情况下包装元素