实现基于Flag切换HTML的两个按钮互斥联动功能

我明白你现在遇到的困扰了——直接触发对方按钮的click事件会让两个按钮的状态切换逻辑互相干扰，最后导致效果抵消。这是因为触发click后，对方的所有点击处理逻辑都会执行，包括它反过来触发你的click，形成了循环触发的死胡同。咱们换个思路，不要通过触发click来切换对方状态，而是直接手动操作对方的DOM和状态，同时统一管理两个盒子的状态，就能解决这个问题。

重构后的完整代码 #

HTML

<div class="wrapping">
  <div class="buttontoggle1">
    <div>box1</div>
  </div>
  <div class="content1">green1</div>
</div>
<div class="wrapping">
  <div class="buttontoggle2">
    <div>box2</div>
  </div>
  <div class="content2">green2</div>
</div>

CSS

.wrapping{
  position:relative;
  float:left;
  margin-right:20px;
}
.content1,.content2{
  display:none;
  position: absolute;
  top: 50px;
  width:50px;
  height:50px;
  background-color:green;
}
.buttontoggle1,.buttontoggle2{
  float:left;
  width: 50px;
  height:50px;
  background-color:red;
  margin-right:10px;
  cursor: pointer; /* 增加鼠标指针提示，提升体验 */
}
.close1,.close2{
  height:50px;
  width:50px;
  border:white solid 2px;
  box-sizing: border-box; /* 避免边框撑开元素 */
}
.active{
  background-color:blue;
}

jQuery

$(function() {
  // 初始化状态：两个盒子都收起
  $(".content1, .content2").hide();
  let box1State = "off";
  let box2State = "off";

  // 处理box1的点击逻辑
  $(".buttontoggle1").on("click", function(e) {
    e.stopPropagation();
    
    // 如果box2是展开状态，先关闭box2
    if (box2State === "on") {
      $(".content2").slideUp();
      $(".buttontoggle2").removeClass("active").html("<div>box2</div>");
      box2State = "off";
    }

    // 切换box1的状态
    if (box1State === "off") {
      $(".content1").slideDown();
      $(this).addClass("active").html("<div class='close1'>clicked</div>");
      box1State = "on";
    } else {
      $(".content1").slideUp();
      $(this).removeClass("active").html("<div>box1</div>");
      box1State = "off";
    }
  });

  // 处理box2的点击逻辑
  $(".buttontoggle2").on("click", function(e) {
    e.stopPropagation();
    
    // 如果box1是展开状态，先关闭box1
    if (box1State === "on") {
      $(".content1").slideUp();
      $(".buttontoggle1").removeClass("active").html("<div>box1</div>");
      box1State = "off";
    }

    // 切换box2的状态
    if (box2State === "off") {
      $(".content2").slideDown();
      $(this).addClass("active").html("<div class='close2'>clicked</div>");
      box2State = "on";
    } else {
      $(".content2").slideUp();
      $(this).removeClass("active").html("<div>box2</div>");
      box2State = "off";
    }
  });

  // 点击文档空白处关闭已展开的盒子
  $(document).on("click", function() {
    // 关闭box1（如果展开）
    if (box1State === "on") {
      $(".buttontoggle1").click();
    }
    // 关闭box2（如果展开）
    if (box2State === "on") {
      $(".buttontoggle2").click();
    }
  });
});

关键改动说明 #

• 统一状态管理：用box1State和box2State两个变量统一跟踪两个盒子的展开状态，避免通过DOM元素长度（比如.close1的存在）来判断，这样更可靠，也避免DOM变动带来的判断误差。
• 避免循环触发：点击一个按钮时，先检查另一个盒子的状态，如果是展开的，就直接手动修改它的DOM（收起内容、恢复按钮文字、移除active类）并更新状态变量，而不是触发它的click事件，这样就不会触发对方的点击逻辑，也就不会形成循环。
• 整合事件绑定：把所有逻辑放在一个$(function(){})里，避免分散多个script标签，代码更清晰易维护。
• 修复文档点击逻辑：通过状态变量判断是否需要关闭，而不是通过DOM元素长度，避免误触发。

这样修改后，就能实现你要的联动效果：点击一个盒子时，如果另一个是展开的，会先关闭它，再展开当前盒子；点击已展开的盒子会收起它；点击空白处会关闭所有展开的盒子，同时保留了每个按钮的HTML切换和样式变化效果。

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