twitter-bootstrap - Bootstrap 和扩展菜单

Question

bootstrap 导航栏下拉菜单的默认行为是覆盖内容的常规下拉菜单。但是如果我想在你点击目录时让它像这个网站怎么办:

折叠:

展开:

您会看到 div 是如何展开的。它类似于 Bootstrap 菜单，但在移动 View 上。所以我想要 my site当我将鼠标悬停在菜单项上时，展开整个标题部分。

在 bootstrap 中这可能吗？

Answer 1

您可以使用 Bootstrap Collapse 切换任何内容的可见性.

例如，如果您的导航栏有以下链接:

<li><a href="#" >Directory <span class="caret"></span></a></li>

您可以像这样添加 data-toggle="collapse"data-target="#demo":

<li><a href="#" <b>data-toggle="collapse" data-target="#demo"</b>>
    Directory <span class="caret"></span>
</a></li>

然后像这样包含您想要的下拉菜单:

<div id="demo" class="collapse">
    Expander Stuff
</div>

Demo in fiddle

折叠:

展开:

注意:我不会在悬停时实现此操作，因为它会忽略移动用户。您可以轻松实现点击功能。如果您真的想要悬停，则必须添加一些额外的处理。