jQuery全局实现按钮active/inactive切换及关联显隐精简方案

核心思路是通过统一类名+自定义数据属性解耦按钮和关联元素的绑定关系，把重复的事件逻辑抽成全局通用逻辑，后续新增同类交互无需重复编写JS代码。

完整实现代码 #

全局JS逻辑（仅需编写一次，全页面复用） #

$(document).on('click', '.toggle-btn', function() {
  const $curBtn = $(this);
  // 切换同组按钮激活状态
  $curBtn.addClass('active').siblings('.toggle-btn').removeClass('active');
  // 读取按钮配置的关联目标、显隐状态
  const $target = $($curBtn.data('target'));
  const showTarget = $curBtn.data('state') === 'show';
  // 控制关联元素显隐
  $target.toggleClass('inactive', !showTarget);
});

HTML结构改造（兼容原有类名，仅新增通用标识） #

原有自定义类名、样式全部保留，只需要给交互按钮加上通用类和配置属性即可：

<style>
.active {
  background-color: blue;
  color: white;
}
.inactive { display: none; }
.btn { padding: 5px 20px; }
div { margin-top: 20px; }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <button class="toggle-btn show-btn btn" data-target=".p-thanks" data-state="show">Show</button>
  <button class="toggle-btn hide-btn btn" data-target=".p-thanks" data-state="hide">Hide</button>
  <br>
  <p class="p-thanks inactive">Thank you</p>
</div>

<div>
  <button class="toggle-btn approve btn" data-target=".p-approve" data-state="show">Approve</button>
  <button class="toggle-btn disapprove btn" data-target=".p-approve" data-state="hide">Disapprove</button>
  <br>
  <p class="p-approve inactive">Approve</p>
</div>

<div>
  <button class="toggle-btn agree btn" data-target=".p-agree" data-state="show">Agree</button>
  <button class="toggle-btn disagree btn" data-target=".p-agree" data-state="hide">Disagree</button>
  <br>
  <p class="p-agree inactive">Agree</p>
</div>

方案特性 #

• 代码极简：原有6段重复事件绑定缩减为1段全局逻辑，JS代码量减少90%以上
• 零成本扩展：后续新增任意数量的同类按钮组，只需要在HTML中给按钮加上toggle-btn类，配置对应的data-target（关联元素选择器）、data-state（show为显示、hide为隐藏）即可，无需编写新的JS代码
• 无逻辑冲突：同组按钮状态切换仅查找同级的同通用类按钮，不会跨组误改其他模块的按钮状态
• 向下兼容：原有业务自定义类名全部保留，不影响其他依赖这些类名的已有逻辑

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