如何修复左右联动区块动画问题并简化实现代码？

问题根源 #

1. 重复绑定点击事件：原代码中每个标题点击都会执行opacity()函数，反复给元素绑定点击处理逻辑，导致多次触发，行为混乱。
2. CSS动画无效：display属性无法通过CSS动画过渡，原动画在@keyframes中切换display，浏览器不会执行这个过渡效果，导致容器直接显示/隐藏，无动画过渡。
3. 代码冗余：三个标题的处理逻辑几乎完全重复，后续维护成本高。
4. 状态处理缺失：切换时未重置其他标题的颜色状态，也没有正确处理容器动画结束后的显示控制。

修复方案 #

1. 重构HTML结构 #

给标题和内容容器添加统一类名，通过data-target属性关联标题与对应容器，减少ID依赖，让逻辑更通用。

2. 修正CSS动画逻辑 #

移除keyframes中无效的display切换，改用transition实现opacity和visibility的淡入淡出，同时通过类名控制display属性，保证元素隐藏时不占用布局空间。

3. 简化JS逻辑 #

使用事件委托统一绑定点击事件，通过数据属性匹配对应容器，一次性处理所有切换逻辑，避免重复代码。

修改后的完整代码 #

HTML

<div class="content-container">
    <div class="content-block active" id="content-first">
        <div>
            <h2>ORM</h2>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
        </div>
        <div>
            <p>SERM</p>
            <p>1</p>
            <p>1</p>
        </div>
    </div>
    <div class="content-block" id="content-second">
        <div>
            <h2>ORM</h2>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
        </div>
        <div>
            <p>SERM</p>
            <p>1</p>
            <p>1</p>
        </div>
    </div>
    <div class="content-block" id="content-third">
        <div>
            <h2>ORM</h2>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
        </div>
        <div>
            <p>SERM</p>
            <p>1</p>
            <p>1</p>
        </div>
    </div>
</div>
<div class="title-container">
    <h2><a class="toggle-title active" data-target="content-first">SMM</a></h2>
    <h2><a class="toggle-title" data-target="content-second">1</a></h2>
    <h2><a class="toggle-title" data-target="content-third">1</a></h2>
</div>

CSS

/* 内容块基础样式 */
.content-block {
    display: none;
    gap: 150px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* 激活状态：显示内容并执行淡入动画 */
.content-block.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

/* 标题基础样式 */
.toggle-title {
    color: #04101c;
    cursor: pointer;
    transition: color 0.2s ease;
    text-decoration: none;
}

/* 激活状态的标题颜色 */
.toggle-title.active {
    color: #7a73ff;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    const titleContainer = document.querySelector('.title-container');
    const contentBlocks = document.querySelectorAll('.content-block');
    const toggleTitles = document.querySelectorAll('.toggle-title');

    // 事件委托：统一处理所有标题点击
    titleContainer.addEventListener('click', function(e) {
        const targetTitle = e.target.closest('.toggle-title');
        if (!targetTitle) return;

        const targetId = targetTitle.dataset.target;
        const targetBlock = document.getElementById(targetId);
        if (!targetBlock) return;

        // 重置所有状态
        toggleTitles.forEach(title => title.classList.remove('active'));
        contentBlocks.forEach(block => block.classList.remove('active'));

        // 设置当前激活状态
        targetTitle.classList.add('active');
        targetBlock.classList.add('active');
    });
});

关键修改说明 #

• HTML结构优化：通过data-target建立标题与内容的关联，统一类名让选择器更简洁，初始状态用active类控制默认显示。
• CSS动画修复：用transition实现平滑过渡，visibility保证元素不可见时无法交互，display仅在激活时设置为flex，避免布局混乱。
• JS逻辑简化：事件委托减少重复绑定，统一处理状态重置与激活，新增标题或内容块时无需修改JS代码，扩展性更强。

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