Question

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

我将此脚本用于 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（测试版）的代码

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 相同的行为：

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

Answer 1

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

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

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

1 个答案: