Bootstrap - 折叠模式下的自动下拉导航菜单答案

【问题标题】：Bootstrap - auto-dropdown navigation menus in collapsed modeBootstrap - 折叠模式下的自动下拉导航菜单
【发布时间】：2015-07-18 04:41:06
【问题描述】：

在引导导航栏中，我有一个下拉菜单。

在较小的屏幕上，导航栏被折叠，我得到一个按钮来切换导航栏项目的可见性。

由于我唯一的项目是下拉菜单，我觉得必须先单击以切换导航可见性，然后单击以下拉菜单有点“愚蠢”。

我可以看到，实际上触发下拉菜单的是在下拉菜单中添加 open 类 - 就像 in 似乎触发折叠导航栏的可见性一样。

但是当显示折叠的导航栏时，如何使下拉菜单“自动下拉”？

一个小小提琴来说明：https://jsfiddle.net/2eyvryck/

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

@media (max-width: 767px) {
    .container-fluid>.navbar-collapse {
        height:auto ! important;
        display:block ! important;
        visibility: visible ! important;
    }
}

https://jsfiddle.net/2eyvryck/1/

【讨论】：

我可能表达的不够清楚。您的代码将始终显示下拉菜单链接，而不是下拉菜单本身。我希望下拉菜单项 - 嵌套的 <li> 项可见。
现在我们正在谈论 :-) 至少如果我们从您的第一个答案中删除选择器。因为它使完整的菜单始终可见。但是......不过，我希望有另一种解决方案。因为单击下拉菜单项仍会切换“开放”类，这使得无论是否具有开放类，一切都呈现相同非常重要。我更喜欢在按下第一个折叠按钮或屏幕变窄或其他情况时自动广告“打开”类的解决方案，但有什么用 :-) 谢谢！

【解决方案2】：

这是一个 JQuery 版本。它看起来不太好，但确实保留了切换功能。

$('.navbar-toggle').on('click', function () {
    setTimeout(function(){$('.dropdown-toggle').parent().addClass('open');},300)
});

需要setTimeout，以便在导航菜单打开时 Bootstrap 关闭下拉菜单后触发。

【讨论】：

哇。我从来没有考虑过这个选项。由于导航栏切换只会在小屏幕上切换，因此可以使用。谢谢！