Question

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

我的想法是拥有第一个UL和它的LI展示，但隐藏UL UL和UL UL UL以及它们各自的LI。

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

接下来的想法是，父UL和它的LI一起隐藏，但不是我刚刚选择的子UL。

如果再点击另一个LI，它会显示LI的子UL和它的各个LI。

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

我知道这很复杂，而且我无法理解如何做到这一点 - 我猜测CSS和jQuery的组合我已经尝试了各种各样的东西并搜索了很多因此我正在诉诸于此。

如果有人对我正在谈论的内容有任何想法以及如何实施它会很棒，因为我甚至有点迷失在哪里开始。

修改

我将在固定宽度div内使用UL，因此我可以在未使用的UL上使用溢出：隐藏和负值来进行“虚假隐藏”。

Answer 1

这是我在JSFiddle完成的一个小模拟，你只需要采用一些非正统的解决方法来实现这一点。

是的，你需要一些jQuery来实现它，我只是为了例子而悬停，你可以使用你需要的事件，这只是校长：

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

希望这有帮助。

复杂的嵌套UL导航

1 个答案: