Bootstrap和扩展菜单

Question

引导程序导航栏下拉列表的默认行为是遍历内容的常规下拉列表。但是当你点击目录时我想把它变成这个网站怎么办：

折叠：

扩展：

你看到div是如何扩展的。它像引导程序菜单，但在移动视图上。所以当我将鼠标悬停在菜单项上时，我希望在my site上展开整个标题部分。

引导程序可以吗？

Answer 1

您可以使用Bootstrap Collapse切换任何内容的展示率。

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

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

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

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

然后包含您想要的下拉菜单：

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

Demo in fiddle

<强>折叠：

<强>扩展：

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