如何在活动的嵌套折叠部分上旋转箭头/V形/插入符号

<div id="collapse-container">
  <!-- 折叠内容 -->
</div>

#collapse-container {
  /* 折叠内容的样式 */
}

#collapse-container + .collapse-trigger::after {
  /* 旋转箭头/V形/插入符号的样式 */
}

#collapse-container + .collapse-trigger::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px; /* 可根据需要调整箭头的大小 */
  border-color: #000 transparent transparent transparent; /* 可根据需要调整箭头的颜色 */
  transform: rotate(0deg); /* 初始状态为未旋转，可根据需要调整旋转角度 */
  transition: transform 0.3s ease; /* 添加过渡效果，使旋转更平滑 */
}

var collapseContainer = document.getElementById("collapse-container");
var collapseTrigger = document.querySelector(".collapse-trigger");

collapseTrigger.addEventListener("click", function() {
  if (collapseContainer.classList.contains("collapsed")) {
    collapseContainer.classList.remove("collapsed");
    collapseTrigger.style.transform = "rotate(90deg)"; /* 展开时的旋转角度 */
  } else {
    collapseContainer.classList.add("collapsed");
    collapseTrigger.style.transform = "rotate(0deg)"; /* 折叠时的旋转角度 */
  }
});