当前位置: 首页 > 面试题库 >

在Bootstrap 3中的导航栏元素外部单击时,如何关闭打开的折叠式导航栏?

咸皓
2023-03-14
问题内容

在导航栏元素外部单击时,如何关闭打开的折叠导航栏?当前,打开或关闭它的唯一方法是单击navbar-toggle按钮。

到目前为止,我已经尝试了以下似乎无效的方法:

jQuery(document).click(function() {

});

jQuery('.navbar').click(function(event) {
    jQuery(".navbar-collapse").collapse('hide');
    event.stopPropagation();
});

问题答案:

看一下:

$(document).ready(function () {
    $(document).click(function (event) {
        var clickover = $(event.target);
        var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
        if (_opened === true && !clickover.hasClass("navbar-toggle")) {
            $("button.navbar-toggle").click();
        }
    });
});

我知道,调用click()并不是很优雅,但collapse('hide')对我也不起作用,而且我认为该动画比几乎没有添加和删除类更好。



 类似资料:
  • 问题内容: 在导航栏元素外部单击时,如何关闭打开的折叠导航栏?当前,打开或关闭它的唯一方法是单击按钮。 请参见示例和代码: 到目前为止,我已经尝试了以下似乎无效的方法: 问题答案: 看一下: 我知道,调用并不是很优雅,但对我也不起作用,而且我认为该动画比几乎很难添加和删除类更好。

  • 问题内容: 我使用Bootstrap 4很好地创建了这个可折叠的导航栏,但是我希望当用户单击链接时将其关闭。有什么办法吗?谢谢 html导航栏: .icon-bar的css,因为Bootstrap 4不使用icon-bar类。 问题答案: 您可以像这样将组件添加到链接。 或者 ,(也许是一种更好的方法)像这样使用jQuery。

  • 我使用Bootstrap4创建了这个可折叠的导航栏,它工作得很好,但我希望在用户单击链接时关闭它。有办法吗?谢谢 html导航栏: css用于。图标栏,因为引导程序4不使用图标栏类。

  • 当导航栏崩溃时,我想让我的搜索栏可见。 我的代码:http://jsfiddle.net/edalzell/a3yng825/1/折叠时工作,但展开时显示两个搜索栏。 HTML:

  • 每当用户按下< code >底部导航栏中的一个按钮时,我都想关闭我的< code >抽屉小部件,但是我不太明白这一点。我现在设置BNB的方式是通过应用程序记住所有屏幕的当前状态(使用< code>IndexedStack),但我想在按下BNB按钮之前关闭任何屏幕中打开的抽屉。我的每个屏幕都有自己的抽屉和应用程序栏,所以我不能在BNB里面放一个抽屉(或者我可以,我可以用一个开关盒动态地改变它们,当一

  • 问题内容: 这是我简单的导航栏: 我只是想防止这种情况崩溃,因为我不需要它,怎么办? 我想避免编写30万行CSS来覆盖默认样式。 有什么建议吗? 问题答案: 经过仔细检查,没有30万行,但是您需要覆盖大约3-4个CSS属性: 这样,您的菜单就不会折叠。 说明 四个CSS属性分别执行以下操作: 引导程序中的默认属性隐藏平板电脑(风景)和电话菜单的右侧,而是显示一个切换按钮以隐藏/显示它。因此,此属性