Bootstrap 和可扩展菜单

Question

Bootstrap导航栏下拉菜单的默认行为是正常的覆盖内容的下拉菜单。但是如果我想让它像点击目录时这个网站一样怎么办：

折叠：

扩展：

你看到div是如何扩展的。这就像是Bootstrap菜单，但在移动视图上。因此，当我悬停在菜单项上时，我希望在我的网站上扩展整个标题部分。

在Bootstrap中是否可能实现这一点？

- Mitrovic Srdjan

---

可能是可以的，但为什么你只想显示一个非常窄的菜单时整个页面都要下降呢？ - DavidG

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>

在fiddle中的演示

Collapsed:

扩展的:

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

- KyleMit

---

感谢大家。 KyleMit，例如http://mobilecommz.com/fbcode/ 点击WHO并同时打开who、what、where下的三个菜单，我是否可以在一个点击中打开所有三个菜单？现在它只会打开某个项目下的菜单。我知道我可以制作div #demodesktop，并将所有项目放置在3列中，但是那样我在移动视图中就没有相同的结构了。我不想重复菜单并为移动端和桌面端创建两个菜单。所以，在WHO点击时，是否可能打开所有三个子菜单（移动设备应该仅展开父级下的子项目）？ - Mitrovic Srdjan

@MitrovicSrdjan，几点说明：我的第一个想法是将所有下拉菜单包装在一个单独的 div 中，并使用折叠函数来定位它。其次，请不要直接链接到您正在工作的网站。这对于其他人来说太多代码需要浏览，而且很可能会更改，这意味着未来的访问者将从您的问题中获得较少的价值。最后，我有一点难以理解您想要什么。我建议您接受此答案，因为它解决了这个问题，并在 jsfiddle 中打开具有工作演示的另一个问题。 - KyleMit