根据屏幕调整大小切换导航

Question

我正在使用 Bootstrap 3 构建站点，尤其是导航折叠功能。我让它工作，以便在小屏幕上折叠主导航然后在大屏幕上显示。

我遇到的问题是 header 在大屏幕上已修复，我被要求默认折叠主导航，并在用户悬停或单击（对于较大的手持设备）任何地方时出现在 header。我通过检查 window 大小并相应地隐藏导航来实现其中的一些。

我遇到的问题是，当 window 调整大小时，它会使导航打开和关闭多次。另外，我不希望此脚本在小屏幕上运行，因为它使用了 Bootstrap 的折叠功能。

这是我的。

HTML:

<header class="navbar-fixed-top" id="header">
    <div class="top">
        <div class="logo">
            Logo here
        </div>
    </div>
    <nav class="navbar navbar-default" id="main-navbar">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar-collapse" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                </button>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="main-navbar-collapse">
                <ul class="nav nav-justified">
                    <li class=""><a href="#">Item 1</a></li>
                    <li class=""><a href="#">Item 2</a></li>
                    <li class=""><a href="#">Item 3</a></li>
                    <li class=""><a href="#">Item 4</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</header>

JS:

var $window = $(window);

function checkWidth() {
    var windowsize = $window.width();

    if (windowsize >= 768) {
        $('#main-navbar').hide();
        $('#header').hover( function() {
            $('#main-navbar').slideToggle();
        } );
    } else {
        $('#main-navbar').show();
    }
};

// Check the width on load.
checkWidth();

// Bind event listener everytime the window size changes.
$(window).resize(checkWidth);

Here's the fiddle.

如何让脚本多次停止运行并在每次调整屏幕尺寸时重新设置？

谢谢

Answer 1

不要使用$('#main-navbar').slideToggle();

使用$('#main-navbar').slideDown();

$('#main-navbar').slideToggle();会触发不停

同时考虑：.mouseenter() 和 .mouseleave() 监听悬停和鼠标何时离开悬停目标。

======

if (windowsize >= 768) {
    $('#main-navbar').hide();
    $('#header').hover( function() {
        $('#main-navbar').slideToggle();
    } );
} else {
    $('#main-navbar-collapse').hide();
    $('.navbar-toggle').on('click', function(){
        $('#main-navbar-collapse').toggle();
    });
}

根据屏幕调整大小切换导航

Toggle nav based on screen resize

jquery

navbar

twitter-bootstrap