- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
UPDATE: To clear up some confusion I added a fiddle that demonstrates how it is supposed to work, but it is just missing the scrollspy: https://jsfiddle.net/kmdLg7t0/ How can I add the scrollspyto this fiddle so that the menu highlights when I'm on a specific section?
我创建了一个固定的左侧菜单,该菜单在平板电脑和手机的浏览器宽度为 <992px。当我选择浏览器宽度为 >992px 的 anchor 链接时,它会关闭菜单并导航到 anchor 链接部分。
自定义 JQuery 代码:这是我的自定义 jQuery 代码,它在我单击 anchor 链接时关闭 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 代码以关闭菜单并导航到 anchor 链接。
这是 fiddle :
Bootstrap ScrollSpy causes issue with Off Canvas Menu and JQuery Code
My GUESS: I'm guessing the solution to this problem is to use jquery or javascript to prevent or remove the data-target=".navmenu" from activating when my screen is less than the <992px. Or we can find a way to only activate the scrollspy after >992px. I'm currently trying to figure this out, but I need someone who is a true expert in jquery to solve this dilemma.
先决条件:
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
属性在页面上的菜单项和元素之间建立连接。这是它的一部分 source code :
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=#
其他一切都由插件自己处理。
关于javascript - Bootstrap Scrollspy 导致 Off-Canavas 菜单出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42004981/
我正在制作一个单页网站,我正在尝试让导航栏链接反射(reflect)您所在页面的哪个部分。我试过通过 HTML 使用它但没有成功。我在包含不同部分的容器上有这段代码 并且正文设置为相对的。 因为那行
我正在使用 Scrollspy 的 Jquery 独立实现。我在这里有一个关于我的问题的 jsfiddle 示例:http://jsfiddle.net/2acyu/66/ 当页面向下滚动到 3 个部
我正在制作作品集,但我在使用 Bootstrap 4 时遇到了 2 个问题: 将导航栏链接放在右侧 还有 Bootstrap Scrollspy。 有人可以帮我解决以上两个问题吗? 我已经尝试过来自
我已经在我的应用程序中实现了 Scrollspy。因为我在我的应用程序中使用了 knockout 框架,用户可以在一个部分中添加最多 15 行。所以如果他们添加 15 行,滚动 spy 高度就会受到影
您好,我在使用 Bootstrap Scrollspy 时遇到了两个问题 1- 滚动时,事件类不会在我想要加上的位置突出显示 section4 由于某些奇怪的原因没有激活,见此处: Scrollspy
我似乎无法让 scrollspy 处理隐藏元素。 我将 data-spy="scroll"和 data-target=".classOfNavWrapper"放在 body 上,它并没有像文档暗示的那
如您在此示例中所见,Bootstrap Scrollspy 会跳过导航,但实际上并没有像预期的那样工作。错误的元素是获取 .active 类。 $('.spycontent').scrollspy({
我在我的网站上使用 materializecss scrollspy 组件,scrollspy 链接有效。但唯一困扰我的是 scrollspy 的目录没有跟随滚动位置。
我需要 JQuery 方面的帮助,我相信这可能是显而易见的解决方案,但我不知道如何去做。关于滚动页面上的导航栏,我希望导航栏上的链接之一转到外部页面(而不是页面中的某个部分)。它会这样做,但它会弄乱滚
我试图在我的网站中添加 scrollspy 东西,但目前还没有用。当我在那个部分时,它不会突出显示导航栏中的链接,这是 scrollspy 所做的,所以我无法找出问题所在。我已经粘贴了代码并帮助我弄清
我一直在努力建立我的网站,我真的很想在我的页面上有一些字体很棒的字形,当我滚动时它们会淡入。问题是我不太了解 Spyscroll 或如何使用它。 这是我的代码,也许任何人都可以帮助我。 #sectio
Scrollspy 同时突出显示两个目标,这不是我想要的。我希望它只突出显示一个。它确实突出显示了一个,但是当在两个元素之间滚动时它突出显示了两个。 CSHTML var guid = Guid.Ne
scrollspy 上的事件部分未在导航栏上更新。我不确定我是否缺少脚本或代码中是否有错误。 脚本 /* Navbar Spyscroll */ $('body').scrollspy
scrollspy 效果正常,但突然停止工作。我的意思是当 href 链接像这样 href="#id"时,在滚动单页站点时识别菜单的事件元素。但是当 href 像“/home#id”一样给出时它停止工
你好网络爱好者,我希望你能帮我解决一个问题。 我正在使用 bootstrap 创建一个网站,该网站使用 scrollspy 通过导航栏导航到页面的某些部分。我可以让 URL 不显示的唯一方法 "#se
您好,当我启用移动菜单折叠时,它会停止 scrollspy 的工作。 它们都可以单独工作但不能一起工作,这是 bootstrap 的限制吗? 这是我的导航栏代码:
我一直在使用来自 startbootstrap.com 的名为“创意”的模板,如图所示 here . 因为最后一节太短,当它到达页面底部时,它永远不会被 scrollspy 突出显示。但是,正如您在
首先,如果我重复其他地方发布的内容,我深表歉意。我一直在研究其他人为他们的问题找到的解决方案,并且我已经实现了(或者我认为)他们发现的东西,但我正在开发的网站仍然没有达到预期的效果。 所以,我正在处理
我有一个复选框,当选中该特定复选框时,它会在上面显示一些文本: $('#pck-94').click(function() { $('#pico-info').toggle(this.ch
fiddle :http://jsfiddle.net/bVLBL/ “事件”类未应用于正确的链接。有什么解决办法吗? HTML: Introdu
我是一名优秀的程序员,十分优秀!