如何修改Read More按钮的JavaScript代码，实现内容默认隐藏、点击后显示的效果

嘿，我来帮你搞定这个问题！你的代码其实只差一点点就能实现想要的效果啦，我帮你梳理一下问题所在，再给出修正后的方案：

首先看你当前的toggle函数，里面的else分支写错了——不管当前状态是啥，最后都把内容设成了display: none，这就导致点击按钮根本没办法显示内容。另外咱们要确保页面加载时内容默认是隐藏的，这部分你写的循环其实是对的，只是函数逻辑拖了后腿。

修正后的完整代码 #

<script>
function toggle(button){
    // 如果你保持按钮在.moreDetails元素的紧后面，用这行就行
    let Text = button.previousElementSibling;

    // 如果你想调整按钮的位置（只要和.moreDetails在同一个父元素里），可以用下面这行替代上面的
    // let Text = button.parentElement.querySelector(".moreDetails");
    
    if(Text.style.display === "block"){
        // 当前是显示状态，点击就隐藏
        Text.style.display = "none";
        // 顺便改按钮文字，提升用户体验
        button.textContent = "Read More";
    } else {
        // 当前是隐藏状态，点击就显示
        Text.style.display = "block";
        // 按钮文字切换成"Read Less"
        button.textContent = "Read Less";
    }
}

// 页面加载完成后，把所有.moreDetails元素默认隐藏
document.addEventListener('DOMContentLoaded', function() {
    const moreDetailses = document.querySelectorAll(".moreDetails");
    for (let i = 0; i < moreDetailses.length; i++) {
        moreDetailses[i].style.display = "none";
    }
    // 同时把所有对应按钮的默认文字设为"Read More"
    const buttons = document.querySelectorAll('button[onclick="toggle(this)"]');
    buttons.forEach(btn => btn.textContent = "Read More");
});
</script>

关键修改点说明 #

• 把toggle函数里的else分支改成了display: block，这样点击按钮就能正常切换显示/隐藏状态了
• 给初始隐藏的代码加了DOMContentLoaded事件监听，确保页面所有元素加载完成后再执行，避免出现找不到元素的问题
• 额外加了按钮文字切换的逻辑，用户体验会更友好——显示内容时按钮变成“Read Less”，隐藏时变回“Read More”
• 保留了你代码里的两种定位.moreDetails元素的方式，你可以根据自己的HTML结构选择合适的那一行

配套HTML结构示例（供参考） #

<div class="content-block">
    <p>这是页面加载时默认显示的内容</p>
    <div class="moreDetails">
        <p>这是点击Read More后才会显示的隐藏内容</p>
        <p>更多需要隐藏的内容...</p>
    </div>
    <button onclick="toggle(this)">Read More</button>
</div>

这样修改后，页面打开时隐藏内容会默认看不到，点击按钮就会显示出来，再点击又会隐藏，完全符合你的需求啦！

备注：内容来源于stack exchange，提问作者froyo