如何使用jQuery实现多个div的切换显示/隐藏功能？

需求梳理 #

核心交互规则：

• 初始状态：所有按钮（活跃状态）和对应div均可见
• 首次点击任意按钮：仅该按钮对应的div可见（其余div隐藏），同时切换该按钮的状态
• 非首次点击：点击按钮时切换自身状态，同时切换对应div的显示/隐藏；点击其他按钮时，其对应div会从隐藏切换为显示

修改后的代码 #

HTML（优化自定义属性为标准data-target）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <button class="button" data-target="1">Button 1</button>
  <button class="button" data-target="2">Button 2</button>
  <button class="button" data-target="3">Button 3</button>
</div>

<div id="mydiv1">
  <p>Div 1</p>
</div>

<div id="mydiv2">
  <p>Div 2</p>
</div>

<div id="mydiv3">
  <p>Div 3</p>
</div>

jQuery 逻辑

$(function() {
  // 缓存所有目标div元素，记录总数量
  const $allDivs = $('[id^="mydiv"]');
  const totalDivs = $allDivs.length;

  $('.button').click(function() {
    const $currentBtn = $(this);
    const targetDivId = '#mydiv' + $currentBtn.data('target');
    const $targetDiv = $(targetDivId);
    
    // 切换当前按钮的状态类
    $currentBtn.toggleClass('inactive');
    
    // 判断是否为首次点击：当前显示的div数量等于总数量
    const visibleDivsCount = $allDivs.filter(':visible').length;
    
    if (visibleDivsCount === totalDivs) {
      // 首次点击：隐藏所有非目标div，保留当前div显示
      $allDivs.not(targetDivId).hide();
    } else {
      // 非首次点击：直接切换当前div的显示状态
      $targetDiv.toggle();
    }
  });
});

可选CSS（区分按钮状态）

.button.inactive {
  opacity: 0.6;
  /* 可根据需求调整样式，比如变灰、添加边框等 */
}

逻辑说明 #

1. 无需cookie或localStorage，完全通过DOM元素的可见状态判断是否为首次点击
2. 首次点击时，只隐藏其他div，确保当前对应div保持显示（符合“仅对应div可见”的要求）
3. 非首次点击时，直接切换当前div的显示/隐藏，同时切换按钮状态，满足自由切换的需求

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