Javascript / Jquery 脚本因超时而终止

作为一名 Python 爱好者，我正在尝试 JS 和 Jquery。我编写了这个小脚本来使用 Jquery 幻灯片折叠\展开 html 页面上的菜单栏。我相信这应该可以正常工作，但是它所做的只是将我的浏览器冻结大约 10 秒，然后在控制台中我得到“脚本因超时而终止”。任何人都可以指出我正确的方向吗？

$(document).ready(function(){   
    var Clicked = false; 
    while (true) {
    if (Clicked) {
        $("button").click(function(){
            $("#menu").slideDown();
            $("button").replaceWith("<button type=\"button\">&#8593;</button>");
            Clicked = false;  
        });
     } else {
         $("button").click(function(){
             $("#menu").slideUp();
             $("button").replaceWith("<button type=\"button\">&#8595;</button>");
             Clicked = true;  
         });
     }
    }
});

该问题是由于while()环形。在 JS 中，这是一个同步操作，它会阻塞所有其他线程（重要的是，包括 UI 渲染器），从而导致浏览器挂起。这就是为什么您会看到指示操作已终止的警报。

更好的方法是只使用一个事件处理程序来切换状态#menu以及文本中的button被点击的。尝试这个：

$(function() {
  $("button").click(function() {
    $("#menu").slideToggle();
    $(this).html(function(i, h) {
      return h === '↑' ? '↓' : '↑';
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button">&#8595;</button>
<div id="menu">
  Menu...
</div>