页面区块显示隐藏切换OnClick事件实现问题及代码修正求助

看起来你写的代码里有几个关键错误导致功能失效，我帮你梳理并修正一下：

原代码的问题点 #

• 中文引号错误：你代码里用了中文的单引号（‘’），JavaScript只识别英文单引号（''）或双引号（""），这会直接触发语法错误。
• 按钮ID获取错误：你用document.getElementById('Show More')去获取按钮，但按钮的ID是ToggleButton，不是按钮上显示的文字，这里完全搞错了目标元素。
• 初始状态判断逻辑问题：如果你的区块是通过CSS（不是内联style属性）设置默认隐藏的，myBlock.style.display会返回空字符串，而不是'none'，原判断displaySetting == 'block'就会失效。
• 按钮文字切换逻辑颠倒：原代码里的文字切换逻辑搞反了——区块隐藏时按钮应该显示“Show More”，显示时应该显示“Show Less”，你的代码正好写反了。

修正后的完整实现方案 #

1. HTML结构（确保按钮和区块的ID正确） #

<!-- 默认隐藏的目标区块 -->
<div id="service-area-two">
  <!-- 这里填充你的区块内容 -->
  这是需要切换显示的服务区域内容
</div>

<!-- 切换按钮，绑定点击事件 -->
<button id="ToggleButton" onclick="toggleBlock()">Show More</button>

2. CSS（设置区块默认隐藏） #

#service-area-two {
  display: none;
}

3. 修正后的JavaScript代码 #

function toggleBlock() { 
    // 获取目标区块（使用英文引号）
    var myBlock = document.getElementById('service-area-two'); 
    // 获取切换按钮（使用正确的按钮ID）
    var blockButton = document.getElementById('ToggleButton'); 
    // 获取区块实际生效的显示状态，兼容CSS/内联样式的设置
    var isVisible = window.getComputedStyle(myBlock).display !== 'none';

    // 切换状态
    if (isVisible) {
        // 区块当前可见，隐藏它
        myBlock.style.display = 'none';
        // 按钮文字改为"Show More"
        blockButton.innerHTML = 'Show More';
    } else {
        // 区块当前隐藏，显示它
        myBlock.style.display = 'block';
        // 按钮文字改为"Show Less"
        blockButton.innerHTML = 'Show Less';
    }
}

关键改进说明 #

• 改用window.getComputedStyle()获取区块的实际显示状态，不管初始样式是外部CSS还是内联设置的，都能准确判断。
• 修正了按钮ID的获取逻辑，确保拿到正确的按钮元素。
• 调整了按钮文字的切换逻辑，让状态对应关系完全符合需求。
• 统一使用英文引号，彻底避免语法错误。

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