当我在菜单外单击时，如何关闭 Bootstrap 4导航栏折叠菜单？

gwo2fgha 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(4)|浏览(369)

此导航栏对于所有浏览器大小都是折叠的。我想知道如何能够在单击菜单外时关闭展开的菜单。这样切换按钮就不是关闭它的唯一方法了。
我已经尝试了一些关于Bootstrap 3的建议，其中之一是下面包含的Javascript代码，但它们似乎不起作用。
我可能不太懂Javascript或PHP，但我愿意接受你的任何建议。谢谢！

<nav class="navbar navbar-inverse bg-faded">
              <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <span class="navbar-text">&nbsp;</span>
              <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav flex-column">
                  <li class="nav-item active">
                    <a class="nav-link" href="http://touruapp.com/">Home <span class="sr-only">(current)</span></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="http://touruapp.com/about-us-2/">About Us</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="http://touruapp.com/contact-2/">Contact</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="http://touruapp.com/support-2/">Support</a>
                  </li>
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Legal
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                      <a class="dropdown-item" href="http://touruapp.com/terms-2/">Terms</a>
                      <a class="dropdown-item" href="http://touruapp.com/privacy-2/">Privacy</a>
                    </div>
                  </li>
                </ul>
              </div>
            </nav>

            <script>
            $(document).click(function (event) {
                var clickover = $(event.target);
                var $navbar = $(".navbar-collapse");               
                var _opened = $navbar.hasClass("in");
                if (_opened === true && !clickover.hasClass("navbar-toggle")) {      
                    $navbar.collapse('hide');
                }
            });
            </script>

twitter-bootstrap

来源：https://stackoverflow.com/questions/46736823/how-can-i-close-my-bootstrap-4-navbar-collapse-menu-when-clicking-outside-the-me

4条答案

按热度按时间

htrmnn0y1#

如果您正在使用Bootstrap 4，请尝试以下JQuery
点击切换器$(".navbar-toggler").click();，将in替换为show类，将navbar-toggle替换为navbar-toggler，而不是隐藏应用

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

工作提琴：https://jsfiddle.net/rg43fyhL/
第一次

赞(0）回复(0）举报 2022-12-07

dwthyt8l2#

下面的jQuery代码对我来说运行得很好：

// Close Navbar when clicked outside
$(window).on('click', function(event){
    // element over which click was made
    var clickOver = $(event.target)
    if ($('.navbar .navbar-toggler').attr('aria-expanded') == 'true' && clickOver.closest('.navbar').length === 0) {
        // Click on navbar toggler button
        $('button[aria-expanded="true"]').click();
    }
});

说明：

如果导航栏切换器按钮的aria-expanded属性为false，即导航栏已折叠，则不执行任何操作。
如果导航栏切换器按钮的aria-expanded属性为true，则在关闭导航栏之前，我们必须检查单击是在导航栏上进行的还是在导航栏之外进行的，这可以通过检查单击目标的任何祖先是否包含navbar类来轻松验证。
如果click-target元素（单击所针对的元素）的任何祖先包含navbar类，则clickOver.closest('.navbar').length将返回1，否则将返回0。
因此，如果导航栏切换器按钮的aria-expanded属性为true（导航栏未折叠）并且clickOver.closest('.navbar').length返回0（click-target元素没有navbar类的祖先），则通过单击导航栏切换器按钮折叠导航栏，否则不执行任何操作。

赞(0）回复(0）举报 2022-12-07

ui7jx7zq3#

正如我提到的here，您可以使用Vanilla Javascript检查所单击的元素是否是同一导航栏的子元素，以及您想要隐藏的内容（下拉列表）是否正在显示。

window.onload = function () {
    document.addEventListener("click", function (event) {
        // if the clicked element isn't child of the navbar, you must close it if is open
        if (!event.target.closest("#navbar_id") && document.getElementById("navbarSupportedContent").classList.contains("show")) {
            document.getElementById("hamburger_menu_button").click();
        }
    });
}

https://jsfiddle.net/j4tgpbxz/

赞(0）回复(0）举报 2022-12-07

bkhjykvo4#

请尝试此答案的修改版本，在Bootstrap 4.6.2上效果很好

window.onload = function () {
    if (window.jQuery) {
        $(document).click(function (event) {
            var clickover = $(event.target);
            var _opened = $(".navbar-collapse").hasClass("collapse show");
            if (_opened === true && (!clickover.hasClass("navbar-toggler") || !clickover.hasClass("navbar-toggler-icon"))) {
                $("button.navbar-toggler").click();
            }
        });
    }
}

https://jsfiddle.net/x7kwn8ze/1/

赞(0）回复(0）举报 2022-12-07

我来回答

当我在菜单外单击时，如何关闭 Bootstrap 4导航栏折叠菜单？

4条答案

相关问题

热门标签

最新问答