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

Question

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

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

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

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

但是如何进行下拉列表＆＃39;自动下拉＆＃39;何时显示折叠的导航栏？

一个小小的例子来说明：https://jsfiddle.net/2eyvryck/

Answer 1

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

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

Answer 2

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

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

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