为::before伪元素实现下拉箭头交互功能

嘿，我刚好碰到过类似的WooCommerce分类交互问题，给你一套可行的解决方案——核心思路是把原来无法交互的CSS伪元素替换成真实的HTML元素，这样就能分别绑定点击事件啦：

1. 替换伪元素为可交互的触发器 #

因为CSS伪元素没法直接触发JS事件，我们得把原来的::before箭头换成一个真实的<span>元素。如果没法直接修改主题的分类输出代码，用JS动态插入就很方便：

// 给所有带子分类的父分类添加箭头触发器
document.querySelectorAll('.cat-parent').forEach(catItem => {
  const toggleBtn = document.createElement('span');
  toggleBtn.className = 'category-toggle';
  catItem.insertBefore(toggleBtn, catItem.querySelector('a'));
});

2. 迁移CSS样式到新触发器 #

把原来伪元素的样式移到新的.category-toggle类上，顺便调整一下布局确保箭头位置正确：

/* 先移除原来的伪元素样式 */
.cat-item.cat-parent:before {
  display: none;
}

/* 给父分类li添加相对定位，确保箭头位置准确 */
.cat-item.cat-parent {
  position: relative;
}

/* 新箭头触发器的样式 */
.category-toggle {
  position: absolute;
  top: 11px;
  right: 11px;
  width: 20px;
  height: 20px;
  background-size: 15px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(https://www.akord-zupanja.hr/wp-content/uploads/2019/04/navigacijastreldole-crna.png);
  cursor: pointer; /* 显示手型光标，提示用户可点击 */
}

/* 可选：展开时翻转箭头，提升交互体验 */
.cat-parent.open .category-toggle {
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

3. 添加交互逻辑，分离点击事件 #

写一段JS来实现：点击箭头展开/收起子分类，点击父分类文本直接跳转商品列表：

document.addEventListener('DOMContentLoaded', () => {
  // 处理箭头触发器的点击事件
  document.querySelectorAll('.category-toggle').forEach(toggle => {
    toggle.addEventListener('click', e => {
      e.stopPropagation(); // 阻止事件冒泡，避免触发父元素的默认行为
      const parentLi = toggle.closest('.cat-parent');
      parentLi.classList.toggle('open');
      const childrenList = parentLi.querySelector('.children');
      
      // 切换子分类的显示状态
      if (childrenList) {
        childrenList.style.display = childrenList.style.display === 'none' ? 'block' : 'none';
      }
    });
  });

  // 确保父分类链接点击时正常跳转
  document.querySelectorAll('.cat-parent > a').forEach(link => {
    link.addEventListener('click', e => {
      e.stopPropagation(); // 阻止事件冒泡，避免触发展开逻辑
      // 链接会自动跳转，不需要额外操作
    });
  });

  // 可选：初始化时默认收起所有子分类（根据你的需求调整）
  document.querySelectorAll('.cat-parent .children').forEach(list => {
    list.style.display = 'none';
  });
});

小提示 #

如果你的WooCommerce分类原本就自带展开/收起的JS逻辑，记得先禁用它避免冲突。另外，要是想让子分类展开/收起更平滑，可以把display控制换成max-height加过渡动画，效果会更好～

内容的提问来源于stack exchange，提问作者Željko Ronta