JS中如何修改forEach循环代码实现仅点击头部切换分类标签类名

要实现仅点击标签头部时切换开关（打开/关闭），只需要把点击事件的监听对象从整个.single-category容器，改成它内部的.single-category-header头部元素即可，具体修改如下：

修改后的JavaScript代码 #

const openCategories = () => {
    // 选择所有标签头部元素，而非整个标签容器
    const categoryHeaders = document.querySelectorAll('.single-category-header');

    categoryHeaders.forEach((header) => { 
        header.addEventListener('click', () => {
            // 通过头部元素找到父级标签容器，切换它的opened类
            const category = header.closest('.single-category');
            category.classList.toggle('opened');
        });
    });
}

openCategories();

代码说明 #

• 不再给整个标签容器绑定点击事件，而是精准绑定到每个标签的头部.single-category-header
• 点击头部时，通过closest()方法定位到父级标签容器，切换opened类来控制展开/收起状态
• 点击标签内容区域（.content）时不会触发任何开关操作，完全满足“仅点击标签头部才能切换标签状态”的需求

如果你希望只有点击头部的关闭按钮（.toggle-button）才触发状态切换，可以进一步把事件绑定到按钮元素上，代码如下：

const openCategories = () => {
    const toggleButtons = document.querySelectorAll('.toggle-button');

    toggleButtons.forEach((button) => { 
        button.addEventListener('click', (e) => {
            // 阻止事件冒泡，避免触发父元素的点击事件
            e.stopPropagation();
            const category = button.closest('.single-category');
            category.classList.toggle('opened');
        });
    });
}

openCategories();

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