Cho*_*uan 10 javascript jquery scrollspy twitter-bootstrap-3 off-canvas-menu
更新: 为了消除一些困惑,我添加了一个小提琴,演示它应该如何工作,但它只是缺少 scrollspy:https://jsfiddle.net/kmdLg7t0/如何添加scrollspyto这个小提琴,以便菜单当我在特定部分时突出显示？
我创建了一个固定的左侧菜单,在浏览器宽度为<992px的平板电脑和移动设备上变成了一个非画布菜单 .当我在浏览器宽度> 992px上选择锚点链接时,它会关闭菜单并导航到锚点链接部分.
自定义JQuery代码: 这是我的自定义jQuery代码,当我点击锚链接时关闭Off-Canvas菜单:
// close off-canvas menu and navigate to anchor
$('.navmenu-nav li a').on('click', function() {
$('body').removeClass('bs.offcanvas');
});
问题:
我决定添加一个bootstrap offscrollspy,它在浏览器宽度大于992px后按预期工作,但是当我将浏览器宽度调整到小于992px时,这会干扰自定义Jquery代码以关闭菜单并导航到锚链接.
这是小提琴:
Bootstrap ScrollSpy导致Off Canvas Menu和JQuery Code出现问题
我的GUESS:我猜这个问题的解决方案是使用jquery或javascript来阻止或删除data-target =".navmenu",当我的屏幕小于<992px时激活.或者,我们可以找到一种方法,只激活scrollspy后> 992px.我目前正试图解决这个问题,但我需要一个真正的jquery专家才能解决这个难题.
先决条件:
JS:
$(document).ready(function () {
toggleOffcanvas($(window).width() <= 992);
});
// simulate modal opening
$('.nav-link').click(function() {
if ($(window).width() > 992) {
$('.backdrop').hide(0, false);
}
$('#navToggle').click();
});
$('.navmenu').on('show.bs.offcanvas', function() {
if ($(window).width() <= 992) {
$('.backdrop').fadeIn();
}
});
$('.navmenu').on('hide.bs.offcanvas', function() {
if ($(window).width() <= 992) {
$('.backdrop').fadeOut();
}
});
// close modal on resize
$(window).resize(function() {
if ($(window).width() > 992) {
$('.backdrop').hide(0, false);
$('body').removeClass('bs.offcanvas');
}
toggleOffcanvas($(window).width() <= 992);
});
// switch active navigation link onclick
$('.nav a').on('click', function() {
$('.nav').find('.active').removeClass('active');
$(this).parent().addClass('active');
});
// close modal when navigating to anchor
$('.navmenu-nav li a').on('click', function() {
$('body').removeClass('bs.offcanvas');
});
function toggleOffcanvas(condition) {
if (!! condition) {
$('.nav-link').attr('data-toggle', 'offcanvas');
} else {
$('.nav-link').removeAttr('data-toggle');
}
}
HTML:
<body data-spy="scroll" data-target="#myScrollspy" data-offset="50">
<div class="backdrop"></div>
<div id="myScrollspy" class="navmenu navmenu-default navmenu-fixed-left offcanvas-sm colornav ">
<a href="#" class="close" data-toggle="offcanvas" data-target=".navmenu">×</a>
<a id="navToggle" class=""><span></span></a>
<h4 class="navmenu-brand visible-md visible-lg visible-sm visible-xs" href="#">2017</h4>
<ul class="nav navmenu-nav">
<li class="active"><a class="nav-link" data-toggle="offcanvas" data-target=".navmenu" href="#january">Enero</a></li>
<li><a class="nav-link" data-toggle="offcanvas" data-target=".navmenu" href="#february">Msrs</a></li>
<li><a class="nav-link" href="http://www.jasny.net/bootstrap/examples/navmenu-reveal/">Jupiter</a></li>
<li><a class="nav-link" href="http://www.jasny.net/bootstrap/examples/navbar-offcanvas/">Off canvas navbar</a></li>
</ul>
</div>
<div class="navbar navbar-default navbar-fixed-top navbar-preheader">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">navbar brand</a>
</div>
<div class="container">
<div class="page-header">
<h1>Navmenu Template</h1>
</div>
<p class="lead">This example shows the navmenu element. If the viewport is <b>less than 992px</b> the menu will be placed the off canvas and will be shown with a slide in effect.</p>
<p>Also take a look at the examples for a navmenu with <a href="http://www.jasny.net/bootstrap/examples/navmenu-push">push effect</a> and <a href="http://www.jasny.net/bootstrap/examples/navmenu-reveal">reveal effect</a>.</p>
<p class="space"></p>
<p id="january">January</p>
<p id="february">February</p>
</div><!-- /.container -->
</body>
CSS:
html, body {
height: 100%;
}
body {
padding: 50px 0 0 0;
}
.space {padding-bottom:900px;}
.backdrop {
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
bottom: 0;
width: 100vw;
height: 100vh;
z-index: 1040;
display: none;
}
.navbar-fixed-top {
background:#fff!important;
}
.navbar {
display: block;
text-align: center;
}
.navbar-brand {
display: inline-block;
float: none;
}
.navbar-toggle {
position: absolute;
float: left;
margin-left: 15px;
}
.container {
max-width: 100%;
}
@media (min-width: 1px) {
.navbar-toggle {
display: block !important; background:none!important; border:none !important; color:#f90 !important;
}
}
@media (min-width: 992px) {
body {
padding: 30px 0 0 300px;
}
.navmenu {
padding-top: 0;
}
.navbar-toggle {display:none!important;}
.close {display:none}
.navmenu-fixed-left {
z-index:0;
top: 48px;
bottom: 0; background:#fff!important;
}
}
.navbar-default .navbar-toggle .icon-bar{
background-color:#333;
}
.close {margin-right:10px; margin-top:10px;}
@media (max-width:991px) {
.navmenu-fixed-left {
z-index:1050;
top: 0;
bottom: 0; background:#fff!important;
}
}
.backdrop {display:none}
#january, #february {
text-transform: uppercase;
background-color: red;
text-align: center;
line-height: 90vh;
font-size: 5em;
height: 90vh;
color: white;
}
#february {
background-color: green;
}
代码的问题是data-target=".navmenu"菜单项破坏了scrollspy插件。基本上，scrollspy 通过属性 data-target或属性在菜单项和页面上的元素之间建立连接href。这是其源代码的一部分：
return `${selector}[data-target="${target}"],` +
`${selector}[href="${target}"]`
因此，您不能使用data-target菜单链接来关闭菜单。您可以使用 JavaScript 来关闭菜单。
以下是更新后的链接 HTML：
<li class="active"><a class="nav-link" href="#january">Enero</a></li>
<li><a class="nav-link" href="#february">Msrs</a></li>
以及您需要的所有 JavaScript：
$(document).ready(function () {
// Add the backdrop when menu is shown
$('.navmenu').on('show.bs.offcanvas', function() {
$('.backdrop').fadeIn();
});
// Remove the backdrop when menu is hidden
$('.navmenu').on('hide.bs.offcanvas', function() {
$('.backdrop').fadeOut();
});
// Hide the menu on menu item click
$('.nav-link').click(function() {
if ($(window).width() <= 992) {
$('.navmenu').offcanvas('toggle');
}
});
// Remove the backdrop if window is resized over the breakpoint
$(window).resize(function () {
if ($(window).width() > 992) {
$('.backdrop').fadeOut();
}
});
});
一个完整的工作示例：
https://jsfiddle.net/kmdLg7t0/5/
最后，您必须href="#"从链接元素中删除所有不需要的内容。例如，#即使您已导航到 ，关闭菜单按钮也会带您返回#january。
所以我总共做了的事情：
data-属性href=#从链接中删除不必要的内容其他一切都由插件本身处理。