Bootstrap 4侧边栏下拉展开时，如何为父li元素设置指定CSS样式？

嗨，你猜的方向完全没错！我们确实可以通过aria-expanded="true"这个状态来实现需求，下面给你几种可行的方案，你可以根据项目的兼容性需求来选：

方案1：用CSS :has()伪类（简洁现代） #

现代浏览器已经支持:has()伪类，它能让我们直接选择包含特定子元素的父元素。当Bootstrap展开下拉菜单时，触发的<a>标签的aria-expanded属性会变成true，我们就用这个来定位父级<li>：

li.nav-item-sidebar:has(a.nav-link[aria-expanded="true"]) {
  border-left: 3px solid #1ABB9C;
  padding: 8px 8px 8px 5px;
  background-color: #222732;
}

这种写法最简洁，不需要额外JS，缺点是旧浏览器（比如IE11及更早）不支持，如果你的项目不用兼容这些旧环境，首推这个方案。

方案2：利用Bootstrap的show类（兼容性更好） #

Bootstrap在展开下拉菜单时，会给对应的<ul.collapse>添加show类，我们同样可以用:has()来关联父元素：

li.nav-item-sidebar:has(> ul.collapse.show) {
  border-left: 3px solid #1ABB9C;
  padding: 8px 8px 8px 5px;
  background-color: #222732;
}

逻辑和方案1类似，只是判断条件换成了下拉菜单本身的show类，兼容性和方案1一致。

方案3：JS+CSS组合（兼容所有环境） #

如果需要兼容不支持:has()的旧浏览器，我们可以通过监听Bootstrap collapse的事件，给父元素添加/移除自定义类，再用CSS针对这个类写样式：

首先添加JS代码（基于jQuery，Bootstrap 4本身依赖jQuery）：

// 监听下拉展开事件
$('.collapse').on('show.bs.collapse', function() {
  // 找到当前下拉菜单的父级li.nav-item-sidebar，添加自定义类
  $(this).closest('.nav-item-sidebar').addClass('sidebar-expanded');
});

// 监听下拉收起事件
$('.collapse').on('hide.bs.collapse', function() {
  // 收起时移除自定义类
  $(this).closest('.nav-item-sidebar').removeClass('sidebar-expanded');
});

然后写对应的CSS：

li.nav-item-sidebar.sidebar-expanded {
  border-left: 3px solid #1ABB9C;
  padding: 8px 8px 8px 5px;
  background-color: #222732;
}

这种方法兼容性拉满，适合所有支持Bootstrap 4的浏览器环境。

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