JQuery菜单折叠脚本触发浏览器超时终止问题求助

嘿，我一眼就看出问题所在了——你代码里的while(true)是个无限死循环，这直接把浏览器的JS主线程给彻底占满了！

为什么会冻结？ #

JS是单线程的，这个死循环会一直反复执行里面的代码：不断地给按钮绑定点击事件，永远不会停下来。浏览器根本没机会处理用户的点击操作、UI渲染或者其他任何任务，只能一直卡在这个循环里，直到超时触发“script terminated by timeout”的提示。

修复后的代码 #

你完全不需要用循环来绑定事件，只需要给按钮绑定一次点击事件，然后在事件处理函数里切换菜单的状态就行。这里给你两种更简洁的写法：

写法一：手动跟踪状态

$(document).ready(function(){
    // 初始化菜单状态，假设默认是展开的
    let isMenuExpanded = true;

    $("button").click(function(){
        if (isMenuExpanded) {
            $("#menu").slideUp();
            // 直接修改按钮文本，不用销毁重建元素
            $(this).html("↓");
            isMenuExpanded = false;
        } else {
            $("#menu").slideDown();
            $(this).html("↑");
            isMenuExpanded = true;
        }
    });
});

写法二：用jQuery的slideToggle简化逻辑

如果不需要手动跟踪状态，直接用slideToggle可以一键切换菜单的展开/折叠，代码更简洁：

$(document).ready(function(){
    $("button").click(function(){
        $("#menu").slideToggle();
        // 切换按钮图标
        const currentIcon = $(this).html();
        $(this).html(currentIcon === "↓" ? "↑" : "↓");
    });
});

额外说明 #

1. 避免用replaceWith()来修改按钮文本：这个方法会销毁原来的按钮元素再重建，不仅没必要，还可能丢失绑定的事件（不过这里因为是在事件内部操作，暂时不会有问题，但还是用html()更高效）。
2. 永远不要在浏览器主线程里写无限循环：这会直接阻塞所有交互，是前端开发的大忌。

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