单击后如何在引导程序 5 中隐藏导航栏答案

【问题标题】：how hide navbar in bootstrap 5 after click单击后如何在引导程序 5 中隐藏导航栏
【发布时间】：2021-06-29 23:39:19
【问题描述】：

点击登陆页面的锚点后，我需要隐藏/折叠导航栏的帮助。

我将此脚本用于 Bootstrap 4.x

    <script type="text/javascript ">
    $(document).on('click', '.navbar-collapse', function(e) {
        if ($(e.target).is('a')) {
            $(this).collapse('hide');
        }
    });
</script>

示例：https://www.codeply.com/p/mtQ5rWH2DA

但是，此脚本不适用于 Booststrap 5.x。

在这个问题 How to hide collapsible Bootstrap navbar on click 中，用户 Zim 发布了 Boostrap 5 (beta) 的代码

const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('navbarSupportedContent')
const bsCollapse = new bootstrap.Collapse(menuToggle)
navLinks.forEach((l) => {
    l.addEventListener('click', () => { bsCollapse.toggle() })
})

我测试了脚本，部分工作。但是，在加载/重新加载页面时，导航栏默认展开而不是折叠，这不是很漂亮示例：https://www.codeply.com/p/VyAEZuzWzm

观察：

Zim 的脚本有效，但方式有点奇怪。加载页面时，菜单已经展开而不是折叠，并且只有在单击时才会关闭。

换句话说，我试图拥有与 Bootstrap 4.x 相同的行为：

加载和/或重新加载页面时菜单折叠 > 点击工具打开菜单 > 点击链接/锚点 > 点击后菜单折叠

【问题讨论】：

标签： twitter-bootstrap bootstrap-5

【解决方案1】：

默认情况下它是打开的，因为脚本会实例化 Bootstrap Collapse。只需将切换选项设置为 false...

const bsCollapse = new bootstrap.Collapse(menuToggle, {toggle:false})

【讨论】：