首页 > web前端 > css教程 > 如何在外部点击时关闭 Bootstrap 3 折叠的导航栏?

如何在外部点击时关闭 Bootstrap 3 折叠的导航栏?

Mary-Kate Olsen
发布: 2024-11-16 17:50:03
原创
786 人浏览过

How to Close a Bootstrap 3 Collapsed Navbar on Outside Click?

单击外部时关闭折叠的导航栏

要在 Bootstrap 3 中的指定区域之外单击时关闭折叠的导航栏,可以使用以下解决方案实现:

任务是建立一种机制来感知用户在导航栏元素之外的点击并触发导航栏的关闭。使用 jQuery(document).click(function()) 和 jQuery('.navbar').click(function()) 的最初尝试未能实现此目标。

修改后的方法合并了单击事件文档元素上的侦听器:

$(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();
        }
    });
});
登录后复制

在此代码中,点击确定发生单击的元素。 _opened 确定导航栏当前是否折叠和打开。然后,如果导航栏打开并且单击发生在切换按钮之外,则会以编程方式单击该按钮,从而触发导航栏关闭。

此解决方案实现了平滑的折叠动画并停止将单击事件传播到底层元素,确保导航栏在其边界之外单击时关闭。

以上是如何在外部点击时关闭 Bootstrap 3 折叠的导航栏?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板