Question

我有这个HTML：

<ul>
  <li class="current"> level 1 </a>
    <ul>
      <li><a class="children">level 2</a>
        <ul>
          <li><a> level 3 </a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

如何使用css display none / block创建简单的显示/隐藏？

目前这样做只会让我进入第二级，而且我在逻辑上有点困惑：

ul ul,
ul ul ul {
   display: none;
}

.current .children {
   display: block;
}

Answer 1

非常简单，到处都有几十个例子。一点搜索可能有所帮助。

ul ul {
    display: none;
}

ul > li:hover > ul {
    display: block;
}

ul > li > ul > li:hover ul {
    display: block;
}

Answer 2

如果您想使用jQuery，可以查看http://api.jquery.com/toggle/

$('#yourlinkID').click(function() {
     $('#yourbodyID').toggle()
});

当点击带有#yourlinkID的元素时，上面的代码用#yourbodyID切换元素的可见性。

希望这会有所帮助：）

如何在CSS中显示/隐藏3级菜单导航？

2 个答案: