jQuery toggleClass实现互斥显隐面板功能异常求助

原代码逻辑问题 #

• 语句$('.shop_container').find('.wrapper');仅执行了元素查询，既没有存储查询结果也没有绑定后续操作，属于无效代码
• 点击事件中直接对所有.wrapper元素执行toggleClass('show')，没有关联当前点击按钮对应的目标面板，会导致所有面板同步切换显隐状态
• 切换类名后又执行$('.shop_container').find('.wrapper.show').removeClass('show')，会把刚加上的show类全部移除，逻辑自相矛盾，根本无法实现预期效果
• 代码没有建立按钮和对应内容面板的映射关系，无法判断点击按钮后应该展开哪个面板
• 额外问题：CSS中.wrapper.show使用了未定义的CSS变量var(--blue)，如果全局没有提前声明该变量会导致背景色样式不生效。

修复逻辑 #

1. 利用按钮和内容面板的顺序对应关系（第一个按钮对应第一个内容面板，第二个按钮对应第二个内容面板），通过点击元素的索引匹配目标面板
2. 点击按钮时，先移除所有内容面板的show类，确保同一时间最多只有一个面板展开
3. 判断当前点击对应的目标面板之前是否处于展开状态：如果是收起状态则加上show类实现展开；如果已经是展开状态则保持收起，支持点击同一按钮收起已展开面板
4. 提前定义CSS变量修复背景色不生效问题。

修复后完整代码 #

HTML #

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

<div class="shop_container">
  <div class="clicker">
  First
  </div>
  <div class="clicker">
  Second
  </div>
  <div class="wrapper first">
  Content first
  </div>
  <div class="wrapper second">
  Content second
  </div>
</div>

CSS #

/* 提前定义CSS变量，也可直接替换为实际色值 */
:root {
  --blue: #1677ff;
}
.wrapper {
  width: 100vw;
  left: -100vw;
  height: 100vh;
  position: fixed !important;
  top: 0px;
  z-index: 99999;
  background: #ff0000;
  transition: all 0.4s ease-in-out;
  overflow-y: scroll;
  overflow-x: hidden;
}

.wrapper.show {
  left: 0px;
  background-color: var(--blue);
  transition: all 0.4s ease-in-out;
}

JavaScript #

$('.clicker').click(function() {
  // 获取当前点击按钮的索引，匹配对应面板
  const clickIndex = $(this).index();
  const $targetPanel = $('.shop_container .wrapper').eq(clickIndex);
  // 提前判断目标面板当前的展开状态
  const isTargetShow = $targetPanel.hasClass('show');
  
  // 第一步：关闭所有已展开的面板
  $('.shop_container .wrapper.show').removeClass('show');
  
  // 第二步：如果目标面板之前是收起状态，就展开它
  if (!isTargetShow) {
    $targetPanel.addClass('show');
  }
});

效果说明 #

• 默认状态下两个面板全部隐藏
• 点击任意按钮，对应面板从左侧滑入展开，其余面板自动收起
• 点击当前已展开面板对应的按钮，面板滑出收起，回到无面板展开状态
• 完全符合同一时间仅一个面板展开、切换时先关闭已展开面板再打开目标面板的需求

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