javascript - Bootstrap 下拉菜单在低分辨率下损坏

Question

我有一个非常简单的引导菜单，当屏幕宽度小于768px时，该菜单会折叠

<div id="headerNavbar" class="navbar navbar-default">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#headerMenu">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div id="headerMenu" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a>temp</a></li>

            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">DATA <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a>temp</a></li>
                    <li><a>temp</a></li>
                </ul>
            </li>

            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">TOOLS <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a>temp</a></li>
                    <li><a>temp</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

效果很好，但是我只想在屏幕宽度大于768px时自动打开鼠标悬停的一级链接，所以我添加了这段代码

$(document).ready(function () {
    $('.navbar-default .navbar-nav > li.dropdown').hover(function () {
        if (window.innerWidth > 767) {
            $('ul.dropdown-menu', this).stop(true, true).slideDown(0);
            $(this).addClass('open');
        }
    }, function () {
        if (window.innerWidth > 767) {
            $('ul.dropdown-menu', this).stop(true, true).slideUp(0);
            $(this).removeClass('open');
        }
    });
});

在全屏模式下可以使用，但是如果窗口为全屏模式，则在768菜单下将其调整大小后停止工作（例如：单击不起作用），直到再次放大并自动展开将再次起作用。

我该如何解决？是否有某种重置可应用于下拉机制？

Answer 1

您的第一行$(document).ready(function () {仅在加载整个页面时运行一次。取而代之的是，您应该使用事件监听器（例如$( window ).resize(function() {）来处理依赖于窗口大小调整的代码，因为每次调整浏览器窗口大小时，它将在其中运行代码。