防止通过另一个元素的触发点击关闭导航栏
Prevent closing of a navbar with another element's trigger click
我正在使用 jasny bootstrap offcanvas 导航栏 ( http://jasny.github.io/bootstrap/components/#navmenu-offcanvas ),它会在页面其他地方发生点击事件时关闭。但是,我们有一个 Twitter 提要已修改为可在 3 个不同的 Twitter 帐户之间移动。为了在它们之间切换,会触发点击。这导致每次推文切换时导航菜单都会关闭,我似乎无法阻止它。
这里是推特滚动代码:
var tabCarousel = setInterval(function() {
var tabs = $('#twittertab > li'),
active = tabs.filter('.active'),
nextone = active.next('li'),
toClick = nextone.length ? nextone.find('a') : tabs.eq(0).find('a');
toClick.trigger('click');
}, 5000)
我试过将 preventDefault()
和 stopPropagation()
应用到 trigger('click')
但我对 jQuery 非常缺乏经验,我真的只是在猜测把它放在哪里。
对于遇到类似问题的任何人,如果您不介意通过在导航栏本身之外的任何点击牺牲导航栏关闭,那么答案很简单。即,解决方案意味着在导航栏外单击不会将其关闭。
只需将“data-autohide="false"”添加到 offcanvas 元素即可。
然后我添加了一个功能,可以在点击导航栏中的 link 时切换导航栏状态,如下所示;
$('#my-menu > li > a').click(function() {
$('.navmenu').offcanvas('toggle');
});
这意味着如果您有 link 不转到另一个页面,而是在同一页面上的某处定位,则当您单击以移至该部分时,菜单将关闭。
如果您想关闭 link 内部的导航菜单,请单击,然后您必须在此
<div class="navmenu navmenu-default navmenu-fixed-right offcanvas">
并添加此脚本
$(document).ready(function(){$('.navmenu a').click(function() {
$('.navmenu').offcanvas('hide');
});})
在你的代码中。就是这样。
注意:它在单页应用程序中就像魅力一样。
我正在使用 jasny bootstrap offcanvas 导航栏 ( http://jasny.github.io/bootstrap/components/#navmenu-offcanvas ),它会在页面其他地方发生点击事件时关闭。但是,我们有一个 Twitter 提要已修改为可在 3 个不同的 Twitter 帐户之间移动。为了在它们之间切换,会触发点击。这导致每次推文切换时导航菜单都会关闭,我似乎无法阻止它。
这里是推特滚动代码:
var tabCarousel = setInterval(function() {
var tabs = $('#twittertab > li'),
active = tabs.filter('.active'),
nextone = active.next('li'),
toClick = nextone.length ? nextone.find('a') : tabs.eq(0).find('a');
toClick.trigger('click');
}, 5000)
我试过将 preventDefault()
和 stopPropagation()
应用到 trigger('click')
但我对 jQuery 非常缺乏经验,我真的只是在猜测把它放在哪里。
对于遇到类似问题的任何人,如果您不介意通过在导航栏本身之外的任何点击牺牲导航栏关闭,那么答案很简单。即,解决方案意味着在导航栏外单击不会将其关闭。
只需将“data-autohide="false"”添加到 offcanvas 元素即可。
然后我添加了一个功能,可以在点击导航栏中的 link 时切换导航栏状态,如下所示;
$('#my-menu > li > a').click(function() {
$('.navmenu').offcanvas('toggle');
});
这意味着如果您有 link 不转到另一个页面,而是在同一页面上的某处定位,则当您单击以移至该部分时,菜单将关闭。
如果您想关闭 link 内部的导航菜单,请单击,然后您必须在此
<div class="navmenu navmenu-default navmenu-fixed-right offcanvas">
并添加此脚本 $(document).ready(function(){$('.navmenu a').click(function() {
$('.navmenu').offcanvas('hide');
});})
在你的代码中。就是这样。
注意:它在单页应用程序中就像魅力一样。