调整大小后下拉菜单不起作用答案

【问题标题】：Dropdown menu does not work after resizing调整大小后下拉菜单不起作用
【发布时间】：2013-11-29 10:01:03
【问题描述】：

我从 bootstrap 开始，制作了一个只有一个菜单标题（带有下拉项）的小 html 模板。

问题是，在我将窗口调整到足够小以强制响应式菜单折叠后，在折叠时使用下拉菜单（导航），然后我最大化窗口，下拉菜单项停止工作（显示滚动查看内容而不是下拉菜单）。

示例代码？只需尝试引导程序中的“导航栏模板”：http://getbootstrap.com/examples/navbar/

是否有任何已知的解决此问题的方法？

在 Firefox 和 Chrome 中测试。

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

更新

在 Bootstrap 的 CSS 之后添加：

@media (min-width: 768px) 
{   
    .navbar-collapse.in{ overflow-y:visible;}
}

--结束更新

是的，这个看起来“奇怪”的“in”类在重新调整大小后仍然有效。

您可以使用 jquery 删除该类：

$(document).ready(function() 
{
    var $window = $(window);

        // Function to handle changes to style classes based on window width
        function checkWidth() {

        if ($window.width() >= 768) {
            $('.navbar-collapse').removeClass('in').addClass('collapse');
        }
    }

    // Execute on load
    checkWidth();

    // Bind event listener
        $(window).resize(checkWidth);
});

从Dynamically changing class name based on window size调整代码大小，更好的解决方案：How to detect responsive breakpoints of Twitter Bootstrap 3 using JavaScript?

~~也许还可以使用媒体查询在断点上方重置屏幕宽度的 .in 类。~~

好像是个bug，见：https://github.com/twbs/bootstrap/issues/11243

【讨论】：

【解决方案2】：

另一个答案对我不起作用，因为折叠类添加了一个 display:none; （也许是不同版本的 Bootstrap）。对我有用的解决方案是添加到您的响应式 CSS：

@media screen and (min-width: 768px){
    .collapse{ display:block;}
}

对我来说，当我打开然后关闭折叠的菜单，然后调整大小时出现问题。希望这会有所帮助。

【讨论】：

【解决方案3】：

在折叠元素上强制自动高度（高于断点）对我有用。

在切换按钮上查找 id 或类，例如。 data-target=".navbar-ex1-collapse" 并使用 min-width （你的断点）：

@media screen and (min-width: 768px){
    .navbar-ex1-collapse { height:auto !important;}
}

【讨论】：