Bootstrap折叠面板内嵌下拉菜单z-index遮挡问题求助

问题分析 #

出现这个问题的核心原因是：Bootstrap折叠面板（Accordion）的每个.accordion-item默认z-index为1，当下拉菜单在第一个折叠面板头部展开时，它的父容器.accordion-item层级与下一个折叠面板相同，导致下拉菜单被下一个折叠面板的头部元素覆盖。之前单独调整下拉菜单的z-index无效，是因为子元素的层级受父容器z-index的限制，必须提升父容器的层级才能解决。

解决方案 #

方法一：动态调整父容器z-index #

通过监听下拉菜单的展开/收起事件，给对应的.accordion-item添加更高的z-index类，确保下拉菜单所在的折叠面板层级高于其他面板：

1. 添加自定义CSS：

/* 给展开下拉菜单的折叠面板提升层级 */
.accordion-item.dropdown-open {
    z-index: 1000;
}

2. 添加JS事件监听：

// 监听所有下拉菜单的展开和收起事件
document.querySelectorAll('.dropdown-toggle').forEach(toggleBtn => {
    // 下拉菜单展开时，给父级折叠面板添加类
    toggleBtn.addEventListener('shown.bs.dropdown', () => {
        toggleBtn.closest('.accordion-item').classList.add('dropdown-open');
    });
    // 下拉菜单收起时，移除类
    toggleBtn.addEventListener('hidden.bs.dropdown', () => {
        toggleBtn.closest('.accordion-item').classList.remove('dropdown-open');
    });
});

3. 修改后的完整代码：

<!DOCTYPE html>
<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
    <style>
        .accordion-item.dropdown-open {
            z-index: 1000;
        }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
    <script>
        document.querySelectorAll('.dropdown-toggle').forEach(toggleBtn => {
            toggleBtn.addEventListener('shown.bs.dropdown', () => {
                toggleBtn.closest('.accordion-item').classList.add('dropdown-open');
            });
            toggleBtn.addEventListener('hidden.bs.dropdown', () => {
                toggleBtn.closest('.accordion-item').classList.remove('dropdown-open');
            });
        });
    </script>

    <div class="accordion">
          <div class="accordion-item">
              <h2 class="accordion-header position-relative">
                <div class="position-absolute top-50 translate-middle" style="right: 0; z-index: 4;">
                  <div class="btn-group position-relative" role="group" aria-label="Basic mixed styles example">
                    <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="black" class="bi bi-power text-center" viewBox="0 2 16 16"><path d="M7.5 1v7h1V1h-1z"/><path d="M3 8.812a4.999 4.999 0 0 1 2.578-4.375l-.485-.874A6 6 0 1 0 11 3.616l-.501.865A5 5 0 1 1 3 8.812z"/></svg>
                      Turn on/off
                    </button>
                    <ul class="dropdown-menu">
                      <li><button class="dropdown-item" type="button">Turn on</button></li>
                      <li><button class="dropdown-item" type="button">Turn off</button></li>
                    </ul>
                  </div>
                </div>  
                <button style="--bs-accordion-btn-focus-box-shadow: 0" class="accordion-button collapsed bg-primary text-white" type="button" data-bs-toggle="collapse" aria-expanded="false">
                    <div class="badge bg-light text-dark me-2 border p-2">
                      Online
                    </div>    
                    <strong>Server1</strong>
                </button>
              </h2>
          </div>
          <div class="accordion-item">
            <h2 class="accordion-header position-relative">
              <div class="position-absolute top-50 translate-middle" style="right: 0; z-index: 4;">
                <div class="btn-group position-relative" role="group" aria-label="Basic mixed styles example">
                  <button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="black" class="bi bi-power text-center" viewBox="0 2 16 16"><path d="M7.5 1v7h1V1h-1z"/><path d="M3 8.812a4.999 4.999 0 0 1 2.578-4.375l-.485-.874A6 6 0 1 0 11 3.616l-.501.865A5 5 0 1 1 3 8.812z"/></svg>
                    Turn on/off
                  </button>
                  <ul class="dropdown-menu">
                    <li><button class="dropdown-item" type="button">Turn on</button></li>
                    <li><button class="dropdown-item" type="button">Turn off</button></li>
                  </ul>
                </div>
              </div>  
              <button style="--bs-accordion-btn-focus-box-shadow: 0" class="accordion-button collapsed bg-primary text-white" type="button" data-bs-toggle="collapse" aria-expanded="false">
                  <div class="badge bg-light text-dark me-2 border p-2">
                    Online
                  </div>    
                    <strong>Server2</strong>
              </button>
            </h2>
        </div>
      </div>
</body>
</html>

方法二：修改下拉菜单的边界容器 #

给下拉菜单添加data-bs-boundary="viewport"属性，让下拉菜单相对于视口定位，脱离父容器的层级限制：

<ul class="dropdown-menu" data-bs-boundary="viewport">
    <li><button class="dropdown-item" type="button">Turn on</button></li>
    <li><button class="dropdown-item" type="button">Turn off</button></li>
</ul>

这种方法不需要额外的CSS和JS，但下拉菜单的位置可能会根据视口自动调整，需要根据页面布局适配。

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