低分辨率

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() {这样的事件监听器来代替依赖于窗口大小调整的代码，因为每次调整浏览器窗口大小时它都会在其中运行代码。