如何替换onclick事件？Borderlands子按钮定位异常修复方案

一、替换onclick事件（改用事件监听器） #

直接在HTML里写onclick属于内联事件，不利于代码维护和逻辑分离，推荐用JavaScript事件监听器实现交互。

步骤1：移除HTML中的onclick属性 #

把所有按钮上的onclick="xxx()"属性删掉，例如：
原代码：

<button onclick="ShowAndHideBorderlandssubclasses()" class="button Borderlands">Borderlands</button>

修改后：

<button class="button Borderlands">Borderlands</button>

同理处理其他所有带onclick的按钮。

步骤2：用JavaScript绑定事件 #

在<script>标签中，等待DOM加载完成后给按钮绑定点击事件，有两种实现方式：

方式1：单个按钮绑定（适合新手理解）

// 等待页面DOM加载完成再执行逻辑
document.addEventListener('DOMContentLoaded', function() {
    // Borderlands按钮事件
    document.querySelector('.Borderlands').addEventListener('click', function() {
        const subBtn = document.getElementById('subbuttonebl');
        subBtn.style.display = subBtn.style.display === 'none' ? 'block' : 'none';
    });

    // Borderlands#2按钮事件
    document.getElementById('subbuttonebl').addEventListener('click', function() {
        const descBox = document.getElementById('BorderlandsDV2');
        descBox.style.display = descBox.style.display === 'none' ? 'block' : 'none';
    });

    // RimWorld按钮事件
    document.querySelector('.RimWorld').addEventListener('click', function() {
        const descBox = document.getElementById('RimWorldDV');
        descBox.style.display = descBox.style.display === 'none' ? 'block' : 'none';
    });

    // Tarkov按钮事件
    document.querySelector('.Tarkov').addEventListener('click', function() {
        const descBox = document.getElementById('TarkovDV');
        descBox.style.display = descBox.style.display === 'none' ? 'block' : 'none';
    });

    // Terraria按钮事件
    document.querySelector('.Terraria').addEventListener('click', function() {
        const descBox = document.getElementById('TerrariaDV');
        descBox.style.display = descBox.style.display === 'none' ? 'block' : 'none';
    });
});

方式2：事件委托（更高效）

如果按钮数量较多，推荐用事件委托——给父元素绑定一次事件，通过判断点击目标执行对应逻辑：
首先给所有按钮的<li>元素添加父容器<ul class="game-list">，然后：

document.addEventListener('DOMContentLoaded', function() {
    const gameList = document.querySelector('.game-list');
    gameList.addEventListener('click', function(e) {
        const target = e.target;
        if (target.classList.contains('Borderlands')) {
            const subBtn = document.getElementById('subbuttonebl');
            subBtn.style.display = subBtn.style.display === 'none' ? 'block' : 'none';
        } else if (target.id === 'subbuttonebl') {
            const descBox = document.getElementById('BorderlandsDV2');
            descBox.style.display = descBox.style.display === 'none' ? 'block' : 'none';
        } else if (target.classList.contains('RimWorld')) {
            const descBox = document.getElementById('RimWorldDV');
            descBox.style.display = descBox.style.display === 'none' ? 'block' : 'none';
        } else if (target.classList.contains('Tarkov')) {
            const descBox = document.getElementById('TarkovDV');
            descBox.style.display = descBox.style.display === 'none' ? 'block' : 'none';
        } else if (target.classList.contains('Terraria')) {
            const descBox = document.getElementById('TerrariaDV');
            descBox.style.display = descBox.style.display === 'none' ? 'block' : 'none';
        }
    });
});

二、修复Borderlands#2子按钮首次位置偏低的问题 #

原因 #

代码中的<li>元素没有被<ul>包裹，浏览器会给零散的<li>添加默认外边距和列表样式，导致第一次显示子按钮时布局计算异常；同时直接切换display:none和block，浏览器首次渲染时可能无法正确计算元素位置。

解决方法 #

1. 用<ul>包裹所有<li>元素
   把所有<li>放到<ul class="game-list">里，同时重置<ul>的默认样式：

.game-list {
    list-style: none; /* 去掉默认列表圆点 */
    padding: 0;
    margin: 0;
}

修改后的HTML结构：

<ul class="game-list">
    <li>
        <button class="button Borderlands">Borderlands</button>
    </li>
    <li>
        <button id="subbuttonebl" class="subbutton Borderlands2 hidden">Borderlands #2</button>
    </li>
    <li> 
        <button class="button RimWorld">RimWorld</button>
    </li>
    <!-- 其他<li>元素 -->
</ul>

2. 统一<li>和按钮的间距样式
   把按钮上的上下margin移到<li>上，避免布局冲突：

.game-list li {
    margin: 4px 0; /* 控制<li>之间的上下间距 */
}

.button, .subbutton {
    margin: 0 30px; /* 只保留左右间距 */
    /* 其他原有样式不变 */
}

.subbutton {
    margin-left: 50px; /* 子按钮的左间距单独设置 */
}

3. 用CSS类控制显示隐藏（更推荐）
   创建hidden类替代直接操作style.display，减少布局计算异常：

.hidden {
    display: none;
}

JS逻辑修改为切换类：

// 例如Borderlands按钮的逻辑改为
subBtn.classList.toggle('hidden');

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