防止通过另一个元素的触发单击关闭导航栏答案

【问题标题】：Prevent closing of a navbar with another element's trigger click防止通过另一个元素的触发单击关闭导航栏
【发布时间】：2015-08-07 22:39:48
【问题描述】：

我正在使用 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 非常缺乏经验，我真的只是在猜测将其放在哪里。

【问题讨论】：

发布相关的click处理程序
抱歉，不确定您的意思，我对 jquery 非常缺乏经验，我只是想在同事不在时为他解决问题
这个toClick.trigger('click'); 调用了一个使用jQuery 绑定的处理程序，你可以发布它吗？因为更好的方法是调用处理函数，而不是触发点击事件。现在，如果这是由外部插件设置的，这可能会更复杂。您最好提供一个简单的示例来复制您的问题，例如使用 jsFiddle
我只是忘记了，但你应该尝试改用：toClick.triggerHandler('click'); 这不会让事件通过 DOM 传播
感谢 A. Wolff 的建议。抱歉浪费您的时间，我假设 jasny navbar 上的 autohide 属性定义了默认情况下导航栏是否展开或折叠。事实上，它会阻止在导航栏本身之外单击关闭导航栏，这正是我所需要的（因为我在导航栏本身有一个关闭按钮）。感谢您的帮助

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

【解决方案1】：

对于遇到类似问题的任何人，如果您不介意通过导航栏本身之外的任何点击来牺牲导航栏关闭，那么答案很简单。即解决方案是指在导航栏外点击不会关闭。

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

然后我添加了一个功能，用于在单击导航栏中的链接时切换导航栏状态，如下所示；

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

这意味着，如果您的链接没有转到另一个页面，而是在同一页面的某个位置有一个锚点，那么当您单击以移动到该部分时，菜单将关闭。

【讨论】：

【解决方案2】：

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

【讨论】：