点击div实现目标div宽度设为50%其余div设为2%的技术问题

我明白你的需求：点击某个div时，它的宽度变为50%，其余同组的所有div宽度变为2%。你之前的尝试里存在冗余操作和逻辑不清晰的问题，咱们可以用更简洁的方式来实现，不用逐个处理每个div。

核心思路 #

1. 给所有可点击的div统一一个通用类（比如.sliding-panel），避免给每个panel单独绑定事件
2. 点击目标panel时：
   • 先统一重置所有panel的状态（宽度/类名）
   • 再单独设置被点击的当前panel为激活状态
   • 用CSS类来控制宽度，配合过渡动画让效果更流畅

完整实现代码 #

HTML结构示例

<div class="container">
  <div class="sliding-panel">Panel 1</div>
  <div class="sliding-panel">Panel 2</div>
  <div class="sliding-panel">Panel 3</div>
  <!-- 更多panel元素... -->
</div>

CSS样式（带平滑过渡）

.sliding-panel {
  width: 9%; /* 默认宽度 */
  height: 100%;
  transition: width 0.3s ease; /* 添加上下文切换的平滑动画 */
  border: 1px solid #ddd;
  margin: 0 2px;
  float: left;
}

/* 激活状态的宽度 */
.sliding-panel.Active {
  width: 50%;
}

/* 非激活状态的宽度 */
.sliding-panel.Offline {
  width: 2%;
}

jQuery代码（简洁版）

$(function() {
  // 给所有.sliding-panel绑定点击事件
  $(".sliding-panel").click(function() {
    // 1. 先重置所有panel：移除激活类，添加非激活类
    $(".sliding-panel").removeClass("Active").addClass("Offline");
    // 2. 给当前点击的panel设置激活状态：移除非激活类，添加激活类
    $(this).addClass("Active").removeClass("Offline");
  });
});

你之前代码的问题分析 #

• 第一个代码片段：手动给每个panel添加Offline类太冗余，而且只绑定了sliding-panel1的点击事件，其他panel点击没有反应
• 第二个代码片段：只处理了当前点击panel的状态切换，完全没考虑其他panel的状态更新
• 第三个代码片段：each循环存在语法错误（缺少闭合括号），遍历逻辑也没正确重置所有非激活元素
• 第四个代码片段：拼写错误（widht应为width），且没有和点击事件关联，无法触发状态切换

额外优化：支持点击切换回默认状态 #

如果需要点击同一个panel时，能从50%切换回默认9%，同时其他panel也恢复默认，可以加个状态判断：

$(function() {
  $(".sliding-panel").click(function() {
    const isCurrentlyActive = $(this).hasClass("Active");
    
    // 先重置所有panel的类和宽度
    $(".sliding-panel").removeClass("Active Offline");
    
    if (isCurrentlyActive) {
      // 如果当前已经是激活状态，所有panel恢复默认宽度
      $(".sliding-panel").css("width", "9%");
    } else {
      // 否则设置当前panel为激活状态，其余为非激活
      $(this).addClass("Active");
      $(".sliding-panel").not(this).addClass("Offline");
    }
  });
});

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