为带Collapse的导航菜单添加切换箭头及背景色（CSS实现问题）

问题背景 #

HTML结构 #

<ul id="urlcss">
   <li class="nav-submenu">
      <a class="collapsed" href="#" data-toggle="collapse" data-target="#submenu0">
         ADMIN
      </a>
      <div class="collapse" id="submenu0" aria-expanded="false">
         // 部分菜单请查看下方图片
      </div>
   </li>
</ul>

菜单状态 #

• 收起状态：仅显示「ADMIN」文本，无展开标识
• 展开状态：显示「ADMIN」及下方子菜单列表

需求 #

点击带有nav-submenu类的<li>时，实现两个效果：

1. 显示箭头标识，区分菜单收起/展开状态，明确子菜单归属
2. 修改当前<li>的背景色

尝试的无效CSS代码 #

.nav-submenu[data-toggle].collapsed:after {
    content: " ▾";
}
.nav-submenu[data-toggle]:not(.collapsed):after {
    content: " ▴";
}

解决方案 #

你的CSS失效核心原因是选择器匹配错误：data-toggle属性和collapsed类都在<a>标签上，而非<li>的nav-submenu元素上；同时背景色修改需要联动<li>的状态。

修正后的CSS代码 #

/* 点击展开时给li添加背景色 */
.nav-submenu.active {
    background-color: #f0f0f0; /* 可根据需求替换成你想要的颜色 */
}

/* 给a标签添加箭头，区分收起/展开状态 */
.nav-submenu a.collapsed:after {
    content: " ▾";
    margin-left: 8px; /* 调整箭头与文本的间距，可按需修改 */
}

.nav-submenu a:not(.collapsed):after {
    content: " ▴";
    margin-left: 8px;
}

配合JS实现背景色联动（基于Bootstrap Collapse） #

Bootstrap的Collapse组件默认只会给触发的<a>标签切换collapsed类，需要手动给父级<li>添加/移除active类来实现背景色变化，添加以下JS代码即可：

// 监听子菜单展开事件，给父li加active类
document.getElementById('submenu0').addEventListener('show.bs.collapse', function () {
    this.closest('.nav-submenu').classList.add('active');
});

// 监听子菜单收起事件，移除父li的active类
document.getElementById('submenu0').addEventListener('hide.bs.collapse', function () {
    this.closest('.nav-submenu').classList.remove('active');
});

效果说明 #

1. 箭头标识：箭头会正确显示在「ADMIN」文本后方，收起时向下，展开时向上，清晰标识子菜单归属
2. 背景色：点击展开子菜单时，对应的<li>会添加背景色，收起时恢复原样，提升交互反馈

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