本文介绍一种无需 cookie 或 localstorage 的纯前端方案，通过 jquery 精确控制多个按钮与对应 div 的双向状态切换，支持任意组合显隐，且每次点击仅影响目标元素，兼顾可维护性与用户体验。
在实际开发中，常需实现“多组开关式交互”——例如一组按钮分别控制对应内容区块（<div>）的显示/隐藏，且要求：
- 初始状态下所有按钮和 div 均可见；
- 每次点击按钮，仅切换自身关联 div 的显隐状态（非全量收起/展开）；
- 按钮视觉状态（如变灰、加 inactive 类）需与对应 div 同步更新；
- 不依赖持久化存储（如 localStorage），纯内存态管理。
原代码的问题在于仅执行单次 toggle()，未考虑“多选共存”场景下的状态隔离。正确解法是：将交互逻辑从“被动切换”升级为“主动同步”——即每次操作前先归一化全局状态（如统一显示所有 div），再按当前选择重新渲染。
以下是推荐实现（基于语义更优的 <input type="checkbox"> + <label> 组合，兼顾可访问性与样式灵活性）：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="button-group"> <label><input type="checkbox" value="1"> Button 1</label> <label><input type="checkbox" value="2"> Button 2</label> <label><input type="checkbox" value="3"> Button 3</label> </div> <div id="mydiv1" class="subdiv"><p>Div 1</p></div> <div id="mydiv2" class="subdiv"><p>Div 2</p></div> <div id="mydiv3" class="subdiv"><p>Div 3</p></div>
.inactive { color: #999; }
label input { display: none; }
label {
display: inline-block;
padding: 6px 12px;
margin-right: 8px;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
user-select: none;
}
label:hover { background-color: #f5f5f5; }$(function() {
// 监听复选框状态变化
$('input[type="checkbox"]').change(function() {
const $checked = $('input[type="checkbox"]:checked');
const $allLabels = $('label');
const $allDivs = $('.subdiv');
// 1. 重置：移除所有 inactive 类，显示全部 div
$allLabels.removeClass('inactive');
$allDivs.show();
// 2. 若无任何勾选，则直接退出（保持全显）
if ($checked.length === 0) return;
// 3. 为未勾选的 label 添加 inactive 类（视觉禁用）
$('input[type="checkbox"]:not(:checked)').closest('label').addClass('inactive');
// 4. 隐藏全部 div，再仅显示已勾选项对应的 div
$allDivs.hide();
$checked.each(function() {
const targetId = '#mydiv' + $(this).val();
$(targetId).show();
});
});
});✅ 关键设计说明：
- 使用 <label> 包裹 <input type="checkbox">，既保证语义化（屏幕阅读器友好），又可通过 CSS 隐藏原生复选框，自定义按钮样式；
- change 事件替代 click，避免重复触发；
- 采用“先清空后重建”策略：每次变更都先恢复初始视图（所有 div 显示 + 所有 label 正常），再按当前勾选状态精准渲染，逻辑清晰且不易出错；
- 通过 closest('label') 精确定位关联标签，确保样式与行为严格绑定。
⚠️ 注意事项：
- 若必须保留原始 <button> 结构，可改用 data-target 属性替代 target（HTML5 标准属性），并手动维护一个状态映射对象（如 const states = {1: true, 2: false, 3: true}），但复杂度上升且易出错；
- 在大型列表中，建议为 .subdiv 添加 display: none 初始样式，并在 JS 中首次执行 show()，避免页面闪动；
- 如需动画效果，可将 show()/hide() 替换为 fadeIn(200)/fadeOut(200)，提升体验。
此方案轻量、健壮、可扩展，适用于任意数量的按钮-div 组合，是 jQuery 多状态切换的经典实践范式。
