使用其他元素的触发器单击阻止关闭导航栏

时间:2015-05-26 10:05:32

标签: javascript jquery css twitter-bootstrap jasny-bootstrap

我正在使用jasny bootstrap offcanvas navbar(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缺乏经验,我真的只是在猜测将其放在哪里。

2 个答案:

答案 0 :(得分:1)

对于任何有类似问题的人来说,如果您不介意在导航栏本身之外的任何点击中牺牲导航栏关闭,答案很简单。即,解决方案意味着在导航栏外部点击将不会关闭它。

只需将'data-autohide =“false”'添加到offcanvas元素。

然后,我添加了一个功能,可以在点击导航栏中的链接时切换导航栏状态,如下所示;

$('#my-menu > li > a').click(function() {
    $('.navmenu').offcanvas('toggle');
});

这意味着如果您的链接不会转到另一个页面,而是同一页面上的某个锚点,则当您单击以移动到该部分时,该菜单将关闭。

答案 1 :(得分:0)

如果您想关闭内部链接上的导航菜单,则必须添加&#34; data-autohide =&#34; false&#34; &#34;在这个上 <div class="navmenu navmenu-default navmenu-fixed-right offcanvas">
并添加此脚本
$(document).ready(function(){$('.navmenu a').click(function() { $('.navmenu').offcanvas('hide'); });})
在你的代码中。是的。
注意:它在单页面应用程序中像魅力一样工作。