0
我正在使用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);
如何让脚本停止多次运行并在每次调整屏幕大小时重置?
感谢
感谢您的。它解决了我的一些问题,多重开放。然而,我需要做的另一部分是在较小的设备上显示#main-navbar(小于768)并删除鼠标输入功能。一旦我调整大小,我的脚本似乎没有为小屏幕做任何事情。 – Darren