如何在Bootstrap 5下拉菜单可折叠项中添加链接且保留折叠功能？

问题原因 #

Bootstrap 折叠组件默认优先读取 href 属性的值作为折叠目标容器的选择器，你将 href 改为实际跳转链接后，折叠组件找不到对应ID的目标容器，自然无法触发折叠效果。

解决方案 #

Bootstrap 折叠组件支持单独使用 data-bs-target 属性指定折叠目标，不需要依赖 href 属性，修改方式如下：

1. 保留 href 属性为你需要跳转的实际链接
2. 给带折叠功能的 a 标签新增 data-bs-target 属性，属性值为对应折叠子菜单的ID
3. 原有 data-bs-toggle、aria-expanded 等属性保持不变

修改后的代码示例 #

<div class="wrapper">
        <!-- Sidebar -->
        <nav id="sidebar">
            <div class="sidebar-header">
                <h3>Bootstrap Sidebar</h3>
            </div>
    
            <ul class="list-unstyled components">
               <li class="active">
                    <!-- 修改处：href填实际跳转地址，新增data-bs-target指定折叠目标 -->
                    <a href="/home" data-bs-toggle="collapse" data-bs-target="#homeSubmenu" aria-expanded="false" class="dropdown-toggle">Home</a>
                    <ul class="collapse list-unstyled" id="homeSubmenu">
                        <li>
                            <a href="#">Home 1</a>
                        </li>
                        <li>
                            <a href="#">Home 2</a>
                        </li>
                        <li>
                            <a href="#">Home 3</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">About</a>
                </li>
                <li>
                    <!-- 修改处：href填实际跳转地址，新增data-bs-target指定折叠目标 -->
                    <a href="/pages" data-bs-toggle="collapse" data-bs-target="#pageSubmenu" aria-expanded="false" class="dropdown-toggle">Pages</a>
                    <ul class="collapse list-unstyled" id="pageSubmenu">
                        <li>
                            <a href="#">Page 1</a>
                        </li>
                        <li>
                            <a href="#">Page 2</a>
                        </li>
                        <li>
                            <a href="#">Page 3</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Portfolio</a>
                </li>
                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>
        </nav>
    
    </div>

跨页面跳转后保持菜单展开补充方案 #

如果你需要跳转新页面后，对应父菜单的折叠项保持展开状态，可以在页面加载时加一段简单的JS处理：

document.addEventListener('DOMContentLoaded', function() {
  // 拿到当前页面的路径
  const currentPath = window.location.pathname;
  // 匹配对应父菜单的a标签
  const activeMenu = document.querySelector(`#sidebar a[href="${currentPath}"]`);
  if (activeMenu && activeMenu.dataset.bsTarget) {
    // 给对应折叠项加show类展开
    const targetCollapse = document.querySelector(activeMenu.dataset.bsTarget);
    targetCollapse.classList.add('show');
    activeMenu.setAttribute('aria-expanded', 'true');
  }
})

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