Toggle nav на основе изменения размера экрана

Question

Я создаю сайт, используя Bootstrap 3, в особенности функцию спуска навигация. У меня он работает так, что на маленьких экранах основной навигатор рушится, а затем отображается на больших экранах.

У меня есть заголовок, который фиксируется на большом экране, и меня попросили повернуть основной навигатор по умолчанию и появиться, когда пользователь либо наводит, либо нажимает (для больших карманных компьютеров) в любом месте заголовка. Я достиг некоторых из этого, проверяя размер окна и скрывая навигацию соответственно.

У меня возникают проблемы с изменением размера окна, это может открывать и закрывать навигацию несколько раз. Кроме того, я не хочу, чтобы этот скрипт работал на небольших экранах, так как использует функцию сбрасывания Bootstraps.

Вот что у меня есть.

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(); 
    }); 
}