我正在尝试将三级 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/