点击按钮关闭下拉菜单时，angle-down图标无法恢复默认状态的问题

• 默认状态：按钮右侧图标为angle-down，下拉菜单处于收起状态
• 第一次点击按钮：下拉菜单正常展开，图标切换为angle-up，功能正常
• 第二次点击按钮：下拉菜单成功收起，但图标未切换回angle-down
• 点击按钮以外区域：下拉菜单收起，图标正常恢复为angle-down

我的HTML代码 #

<button class="dropbtn"> 
     <i class="fa-solid fa-border-all"></i>
     <p>Browse All Categories</p>
     <i class="smallicon fa-solid fa-angle-down"></i>
</button>

我的JS代码 #

document.querySelector('.dropbtn').addEventListener('click', function(event) {
            event.stopPropagation(); 
            var dropdownContent = this.nextElementSibling;
            var angleIcon = this.querySelector('.fa-angle-down');
    
            if (dropdownContent.style.display === 'block') {
                dropdownContent.style.display = 'none';
                angleIcon.classList.remove('fa-angle-up');
                angleIcon.classList.add('fa-angle-down');
            } else {
                dropdownContent.style.display = 'block';
                angleIcon.classList.remove('fa-angle-down');
                angleIcon.classList.add('fa-angle-up');
            }
        });
    
        // Close dropdown when clicking outside
        document.addEventListener('click', function(event) {
            var dropdowns = document.querySelectorAll('.dropdown-content');
            dropdowns.forEach(function(dropdown) {
                if (dropdown.style.display === 'block' && !event.target.closest('.dropdown')) {
                    dropdown.style.display = 'none';
                    var angleIcon = dropdown.previousElementSibling.querySelector('.fa-angle-up');
                    if (angleIcon) {
                        angleIcon.classList.remove('fa-angle-up');
                        angleIcon.classList.add('fa-angle-down');
                    }
                }
            });
        });

问题原因 #

点击按钮的事件中，获取图标元素用的是this.querySelector('.fa-angle-down')——第一次点击后，图标类名被替换成fa-angle-up，第二次点击按钮时，这个选择器找不到对应元素，导致后续的类名修改操作失效，图标无法变回angle-down。

修复方案 #

改用固定不变的类名获取图标元素（比如HTML里的smallicon类，这个类不会随状态切换改变），确保每次点击都能正确拿到图标：

修改后的JS代码：

document.querySelector('.dropbtn').addEventListener('click', function(event) {
    event.stopPropagation(); 
    var dropdownContent = this.nextElementSibling;
    // 改用固定的smallicon类获取图标
    var angleIcon = this.querySelector('.smallicon');

    if (dropdownContent.style.display === 'block') {
        dropdownContent.style.display = 'none';
        angleIcon.classList.remove('fa-angle-up');
        angleIcon.classList.add('fa-angle-down');
    } else {
        dropdownContent.style.display = 'block';
        angleIcon.classList.remove('fa-angle-down');
        angleIcon.classList.add('fa-angle-up');
    }
});

// 点击外部关闭下拉菜单的逻辑也同步修改选择器
document.addEventListener('click', function(event) {
    var dropdowns = document.querySelectorAll('.dropdown-content');
    dropdowns.forEach(function(dropdown) {
        if (dropdown.style.display === 'block' && !event.target.closest('.dropdown')) {
            dropdown.style.display = 'none';
            var angleIcon = dropdown.previousElementSibling.querySelector('.smallicon');
            if (angleIcon) {
                angleIcon.classList.remove('fa-angle-up');
                angleIcon.classList.add('fa-angle-down');
            }
        }
    });
});

可选优化：用类名控制显示（更可靠） #

如果初始下拉菜单是通过CSS设置display: none，而非内联样式，dropdownContent.style.display会是空字符串，虽然当前判断逻辑仍能生效，但用类名控制显示隐藏会更清晰、可靠：

1. 添加CSS样式：

.dropdown-content {
    display: none;
}
.dropdown-content.active {
    display: block;
}

2. 修改JS代码：

document.querySelector('.dropbtn').addEventListener('click', function(event) {
    event.stopPropagation(); 
    var dropdownContent = this.nextElementSibling;
    var angleIcon = this.querySelector('.smallicon');

    // 用toggle切换类名，简化逻辑
    dropdownContent.classList.toggle('active');
    angleIcon.classList.toggle('fa-angle-up');
    angleIcon.classList.toggle('fa-angle-down');
});

document.addEventListener('click', function(event) {
    var dropdowns = document.querySelectorAll('.dropdown-content');
    dropdowns.forEach(function(dropdown) {
        if (dropdown.classList.contains('active') && !event.target.closest('.dropdown')) {
            dropdown.classList.remove('active');
            var angleIcon = dropdown.previousElementSibling.querySelector('.smallicon');
            angleIcon.classList.remove('fa-angle-up');
            angleIcon.classList.add('fa-angle-down');
        }
    });
});

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