如何修复下拉菜单上下箭头的CSS切换异常问题？

问题原因 #

你当前的CSS代码中重复定义了.label::after，后面的样式会完全覆盖前面的，导致箭头始终处于固定旋转角度，没有切换逻辑触发。

修复步骤 #

1. 调整CSS样式 #

保留默认箭头的基础样式，额外添加切换类来改变旋转角度：

/* 默认向下的箭头 */
.label::after {
    background-color: white;
    border-right: 3px solid black;
    border-bottom: 3px solid black;
    width: 10px;
    display: inline-block;
    height: 10px;
    transform: rotate(45deg);
    -webkit-transform: scale(1) rotate(45deg);
    -moz-transform: rotate(45deg) scale(1);
    -o-transform: rotate(45deg) scale(1);
    margin-top: 10px;
    content: '';
    margin-left: 5px;
    /* 添加过渡动画让切换更平滑 */
    transition: transform 0.3s ease;
}

/* 点击后向上的箭头，通过额外类控制 */
.label.open::after {
    transform: rotate(-135deg);
    -webkit-transform: scale(1) rotate(-135deg);
    -moz-transform: rotate(-135deg) scale(1);
    -o-transform: rotate(-135deg) scale(1);
}

2. 修改HTML结构 #

给箭头元素绑定点击事件（也可绑定到父级下拉容器，根据实际场景调整）：

<i class="label" onclick="toggleArrow(this)"></i>

3. 添加JavaScript切换逻辑 #

实现点击切换类的功能：

function toggleArrow(element) {
    element.classList.toggle('open');
    // 如果绑定的是下拉容器，这里可同时控制菜单显示/隐藏
    // 示例：element.nextElementSibling.classList.toggle('show');
}

说明 #

• 通过classList.toggle()方法，每次点击会自动添加/移除open类，实现箭头旋转状态的切换
• 添加transition属性让箭头旋转有平滑过渡效果，提升用户体验
• 若下拉菜单有独立容器，建议把点击事件绑定到容器上，同时控制菜单显示和箭头切换，逻辑更统一

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