点击实现区块显隐切换后如何隐藏被点击的触发按钮？

AI 小北

2026-9-30

修改方案

你只需要在原有JS逻辑中加入获取按钮元素、设置隐藏的代码即可，分为两种常用场景：

场景1：点击按钮后永久隐藏，不随目标区块显隐恢复

直接在函数入口处添加隐藏按钮的逻辑，修改后完整代码如下：

function myFunction() {
  // 直接隐藏当前点击的按钮
  document.getElementById("knop-doorz").style.display = "none";
  var x = document.getElementById("offerte-toggle");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

原有HTML代码无需修改。

场景2：按钮显隐和目标区块状态联动（区块隐藏时按钮恢复显示）

可以在切换区块显隐的分支中同步设置按钮的状态，修改后完整代码如下：

function myFunction() {
  var x = document.getElementById("offerte-toggle");
  var toggleBtn = document.getElementById("knop-doorz");
  if (x.style.display === "block") {
    x.style.display = "none";
    // 区块隐藏时恢复按钮显示
    toggleBtn.style.display = "inline-block";
  } else {
    x.style.display = "block";
    // 区块显示时隐藏按钮
    toggleBtn.style.display = "none";
  }
}