引导-在折叠模式下自动下拉导航菜单

Question

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

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

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

我可以看到，真正触发下拉列表的是将类open添加到下拉菜单中--就像in似乎会触发折叠导航栏的可见性一样。

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

用来说明的小小提琴：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关闭下拉菜单后触发。