如何让Bootstrap 5导航栏折叠后保持关闭状态？

问题现象 #

导航栏点击关闭按钮后会立即重新展开，已确认Bootstrap依赖文件导入正确，移除所有自定义样式后问题仍未解决，当前使用EJS、NodeJS和Express开发。

问题根源 #

导航栏切换按钮使用了类选择器.navbar-collapse作为data-bs-target的值，这种方式可能会匹配页面中多个元素（或因事件冒泡导致折叠状态被重复触发），无法精准定位目标折叠容器，从而引发状态异常。

修复方案 #

将切换按钮的data-bs-target改为ID选择器，与折叠容器的id精准对应，同时确保aria-controls属性值与容器ID一致：

修复后的完整代码 #

<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
    <a class="navbar-brand title" href="/"><img src="white_logo.png" style="max-width: 60px;"> NJC Studios</a>
    <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="container collapse navbar-collapse" id="navbarSupportedContent" style="margin-right: 30px;">
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <% if (title == 'About') { %>
                <a class="nav-link" href="/about" style="background-color: rgb(134, 168, 181);">About</a>
                <% } else { %>
                <a class="nav-link" href="/about">About</a>
                <% } %>
            </li>
            <li class="nav-item">
                <% if (title == 'Services') { %>
                <a class="nav-link" href="/services" style="background-color: rgb(134, 168, 181);">Services</a>
                <% } else { %>
                <a class="nav-link" href="/services">Services</a>
                <% } %>
            </li>
            <li class="nav-item ">
                <% if (title == 'Learn') { %>
                <a class="nav-link" href="/learn" style="background-color: rgb(134, 168, 181);">Learn</a>
                <% } else { %>
                <a class="nav-link" href="/learn">Learn</a>
                <% } %>
            </li>
            <li class="nav-item">
                <% if (title == 'Portfolio') { %>
                <a class="nav-link" href="/portfolio" style="background-color: rgb(134, 168, 181);">Portfolio</a>
                <% } else { %>
                <a class="nav-link" href="/portfolio">Portfolio</a>
                <% } %>
            </li>
            <li class="nav-item ">
                <% if (title == 'Contact') { %>
                <a class="nav-link" href="/contact" style="background-color: rgb(134, 168, 181);">Contact</a>
                <% } else { %>
                <a class="nav-link" href="/contact">Contact</a>
                <% } %>
            </li>
        </ul>
    </div>
</nav>

关键修改点 #

• 切换按钮：data-bs-target从.navbar-collapse改为#navbarSupportedContent
• 保持aria-controls="navbarSupportedContent"与容器ID一致，符合无障碍语义化要求

内容的提问来源于stack exchange，提问作者Noah Chaney