从小屏幕到大屏幕时，有没有办法强制关闭下拉菜单？答案

【问题标题】：Is there a way to force close a dropdown menu when going from a from small screen to large screen?从小屏幕到大屏幕时，有没有办法强制关闭下拉菜单？
【发布时间】：2018-02-23 06:00:18
【问题描述】：

我有一个基于 W3Schools example here 的引导程序构建的导航栏。

当您查看折叠在小屏幕上的菜单时，它看起来像这样：

如果您不点击下拉菜单并展开屏幕，下拉菜单将保持打开状态。

问题：
当您从小屏幕切换到大屏幕时，有没有办法强制关闭下拉菜单？

我为什么要这样做：
对于我当前的导航栏，我编写了一个媒体查询，以便当您将鼠标悬停在桌面上的下拉菜单上时，您会看到菜单。我还禁用了顶部菜单项，因此用户无法单击它。

我将鼠标悬停在那里，并且禁用了顶部链接，因此用户无需单击即可打开或关闭下拉菜单。这很好用...直到您转到较小的屏幕尺寸，单击下拉菜单，然后再次展开屏幕。此时，下拉菜单已打开，您必须再次单击它。我希望关闭下拉菜单，以便展开屏幕（然后用户可以返回将鼠标悬停在下拉菜单上）。

不确定这是否有帮助，但这是我为大屏幕/桌面行为编写的媒体查询：

@media(min-width: 768px) {
    /**Background link hover**/

    .navbar .navbar-nav >  li:hover:after{
        width: 100%;
        background: black;
    }
    .navbar .navbar-nav >  li:after{
        content: '';
        display: block;
        margin: auto;
        height: 3px;
        width: 0px;
        background: transparent;
        transition: width .5s ease, background-color .5s ease;
    }

    .dropdown{
        position: relative;
        display:none;
    }

    .dropdown:hover .dropdown-menu {
        display: block;
        position: absolute;
    }
     .disabled-desktop-link {
        pointer-events: none;
        cursor: default;
    }

}

【问题讨论】：

js 或 jquery 将是一个快速修复。使用 css 可能会更难
@GerardoBLANCO 我不介意js解决方案（我以为你只为与问题直接相关的东西添加了标签。我没有使用过js，所以我没有添加标签）。我对 js 不是很熟悉，但我发现了一个“onresize”函数。因此，我正在查看是否可以在页面较大时使用它来更新 html 中的 data-toggle="collapse"。
你实际上是在正确的轨道上。如果您遇到问题，请将您的完整代码发布为 Minimal, Complete, and Verifiable 示例，以便我们为您提供帮助。

标签： html css twitter-bootstrap

【解决方案1】：

您只需要在窗口上设置一个 JS 事件侦听器，它会在您调整窗口大小时触发。

读到这个 - https://developer.mozilla.org/en-US/docs/Web/Events/resize

【讨论】：

【解决方案2】：

如你所见，当你点击一个类open 到你的li.dropdown 时。因此，您可以做的是在调整窗口大小时删除 open 类。

这是一个简单的方法：

var windowWidth = $(window).width();
$(window).resize(function() {
    if (windowWidth >= 992) // the width you want
        $(".dropdown").removeClass('open');
});

这是一个 jsfiddle :https://jsfiddle.net/5oquf01q/3/

【讨论】：