按钮状态布尔值逻辑异常排查：我的JS代码为何无法正常运行？

你的代码存在三个核心问题，导致功能无法正常运行：

• 赋值运算符误用：你使用了比较运算符==来给status变量赋值（比如status == true;），这只是做相等判断，不会真正改变变量的值。正确的赋值应该用单等号=。
• 条件分支逻辑冲突：两个独立的if语句会导致点击按钮时，两个分支的代码可能先后执行，相互抵消效果。必须改用else if保证同一时间只执行一个分支。
• 淡入动画未重置：myopacity变量在第一次淡入后会停留在1，后续再次打开内容时，不会触发淡入效果，需要在每次显示内容前重置这个变量。

修正后的代码 #

<button id="read-more" class="read-more" onclick="Openreadmore()"> Read More </button>
<!-- 请确保页面存在对应的text-more和small-text元素 -->
<div id="small-text">简短预览文本</div>
<div id="text-more" style="display:none; opacity:0;">需要展开的完整内容</div>

<script>
    var status = false;
    var myopacity = 0;

    function Openreadmore() {
        // 缓存DOM元素，避免重复查询
        const textMore = document.getElementById("text-more");
        const smallText = document.getElementById("small-text");
        const readMoreBtn = document.getElementById("read-more");

        if (status === false) {
            // 展开内容逻辑
            textMore.style.display = "block";
            myopacity = 0; // 重置透明度，保证每次都能触发淡入
            MycomeFadeFunction();
            textMore.classList.add("is-active");
            smallText.style.display = "none";
            readMoreBtn.textContent = 'Close Paragraph';
            status = true; // 正确赋值改变状态
        } else if (status === true) {
            // 收起内容逻辑
            textMore.style.display = "none";
            textMore.classList.remove("is-active");
            smallText.style.display = "block";
            readMoreBtn.textContent = 'Read More';
            status = false; // 正确赋值改变状态
        }
    }

    function MycomeFadeFunction() {
        const textMore = document.getElementById('text-more');
        if (myopacity < 1) {
            myopacity += .075;
            setTimeout(MycomeFadeFunction, 100);
        }
        textMore.style.opacity = myopacity;
    }
</script>

额外优化提示 #

• 用const缓存DOM元素，避免每次函数执行重复调用getElementById，提升性能。
• 用===严格相等运算符替代==，避免隐式类型转换带来的潜在问题。
• 若需要更流畅的交互，可以给收起内容的逻辑添加淡出动画（可选）。

内容的提问来源于stack exchange，提问作者Ömer Kaya Ekici