如何通过CSS实现点击组件标题时切换符号？

嘿，这就帮你实现点击切换标题后方符号的效果～ 核心思路是通过切换类名配合CSS伪元素来改变符号，具体步骤如下：

1. 调整CSS样式 #

在你现有代码的基础上，新增一个类来控制切换后的符号：

/* 默认状态的符号 */
.widgettitle a::after {
  content: " >";
  font-size: 16px;
  color: #d3db2c!important;
}

/* 点击切换后的符号 */
.widgettitle a.expanded::after {
  content: " V";
}

2. 添加JavaScript交互逻辑 #

给标题链接绑定点击事件，切换expanded类即可：

// 如果页面只有一个组件标题，用这段代码
const titleLink = document.querySelector('.widgettitle a');
titleLink.addEventListener('click', function(e) {
  // 阻止链接默认跳转（如果标题不需要跳转可以保留这行）
  e.preventDefault();
  // 切换类名，触发符号变化
  this.classList.toggle('expanded');
});

// 如果页面有多个组件标题，用这段代码批量绑定事件
const titleLinks = document.querySelectorAll('.widgettitle a');
titleLinks.forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    this.classList.toggle('expanded');
  });
});

原理说明 #

点击标题时，JavaScript会给链接元素添加/移除expanded类，CSS则根据这个类的存在与否，切换伪元素::after的content值，从而实现符号在>和V之间切换的效果。

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