<button id="ntpqBtn">加载NTP服务器状态</button> <pre id = "ntpq"></pre> <script> $(document).ready(function(){ function loadOutput(){ var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function(){ if(this.readyState == 4 && this.status == 200){ var ntpqTable = document.getElementById("ntpq"); ntpq.innerHTML = this.responseText; } }; xhttp.open("GET","ntp2.php",true); xhttp.send(); } $("#ntpqBtn").click(function(){ loadOutput(); setInterval(loadOutput,1000); }); }); 添加一个再次点击按钮把内容隐藏的功能

您可以在按钮点击事件中添加一个判断，如果内容已经显示，则再次点击按钮时将其隐藏。以下是一个可能的解决方案：

$(document).ready(function(){
  var showingOutput = false; // 初始时不显示输出内容
  var ntpqTable = document.getElementById("ntpq");
  
  function loadOutput(){
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function(){
      if(this.readyState == 4 && this.status == 200){
        ntpqTable.innerHTML = this.responseText;
      }
    };
    xhttp.open("GET","ntp2.php",true);
    xhttp.send();
  }
  
  function toggleOutput() {
    showingOutput = !showingOutput; // 切换显示状态
    if (showingOutput) {
      ntpqTable.style.display = "block";
    } else {
      ntpqTable.style.display = "none";
    }
  }
  
  $("#ntpqBtn").click(function(){
    toggleOutput(); // 点击按钮时切换显示状态
    if (showingOutput) {
      loadOutput(); // 如果要显示内容，则加载输出
      setInterval(loadOutput,1000); // 并定时刷新
    } else {
      clearInterval(intervalId); // 如果要隐藏内容，则停止定时刷新
    }
  });
  
  var intervalId = null; // 定时器ID
  
  $("#ntpq").click(function() {
    if (showingOutput) {
      toggleOutput(); // 内容已经显示，再次点击将其隐藏
      clearInterval(intervalId); // 停止定时刷新
    } else {
      toggleOutput(); // 内容未显示，点击不起作用
    }
  });
});

在这个解决方案中，我们添加了一个名为intervalId的变量来跟踪定时器ID，并在定时刷新时将其设置为定时器ID。然后，我们在点击内容时检查是否应该隐藏它，如果它已经显示，则调用toggleOutput函数并停止定时刷新。如果内容尚未显示，则toggleOutput函数将不起作用。