同一页面多组jQuery Tabs独立切换及折叠功能实现问题

嘿，我来帮你搞定这个Tabs的问题！你遇到的核心问题是原来的脚本没有针对每个Tabs组做独立的作用域隔离，导致点击一个标签会触发所有组的变化；另外要实现手风琴式的取消激活，只需要在点击事件里加个判断就行。咱们一步步来修改：

1. 核心思路：给每个Tabs组做独立上下文 #

原来的脚本用全局选择器（比如$('.tabs-nav li')）会选中页面上所有的标签，所以点击时所有组都会响应。我们需要用.each()遍历每个Tabs容器，在每个容器内部单独绑定事件，这样每个组的操作都是独立的。

2. 修改后的完整代码 #

HTML结构（确保每个Tabs组有独立容器） #

<!-- 第一组Tabs -->
<div class="tabs-container">
  <ul class="tabs-nav">
    <li class="active">标签1</li>
    <li>标签2</li>
    <li>标签3</li>
  </ul>
  <div class="tabs-content">
    <div class="tabs-panel active">面板1内容</div>
    <div class="tabs-panel">面板2内容</div>
    <div class="tabs-panel">面板3内容</div>
  </div>
</div>

<!-- 第二组Tabs -->
<div class="tabs-container">
  <ul class="tabs-nav">
    <li class="active">标签A</li>
    <li>标签B</li>
    <li>标签C</li>
  </ul>
  <div class="tabs-content">
    <div class="tabs-panel active">面板A内容</div>
    <div class="tabs-panel">面板B内容</div>
    <div class="tabs-panel">面板C内容</div>
  </div>
</div>

CSS（保持原有样式即可，确保激活状态的样式正确） #

.tabs-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}
.tabs-nav li {
  padding: 8px 16px;
  cursor: pointer;
  border: 1px solid #ddd;
  margin-right: 4px;
}
.tabs-nav li.active {
  background: #0073aa;
  color: white;
  border-color: #0073aa;
}
.tabs-panel {
  display: none;
  padding: 16px;
  border: 1px solid #ddd;
  margin-top: -1px;
}
.tabs-panel.active {
  display: block;
}

jQuery脚本（关键修改部分） #

jQuery(document).ready(function($) {
  // 遍历每个Tabs容器，实现独立作用域
  $('.tabs-container').each(function() {
    var $container = $(this);
    var $navItems = $container.find('.tabs-nav li');
    var $panels = $container.find('.tabs-panel');

    $navItems.on('click', function() {
      var $currentItem = $(this);
      var panelIndex = $currentItem.index();

      // 判断当前标签是否已经激活
      if ($currentItem.hasClass('active')) {
        // 取消激活状态：移除所有active类，隐藏所有面板
        $navItems.removeClass('active');
        $panels.removeClass('active');
      } else {
        // 正常切换：激活当前标签，显示对应面板
        $navItems.removeClass('active');
        $currentItem.addClass('active');
        
        $panels.removeClass('active');
        $panels.eq(panelIndex).addClass('active');
      }
    });
  });
});

3. 关键修改点解释 #

• 独立上下文：用$('.tabs-container').each()遍历每个Tabs组，把当前容器存在$container变量里，之后所有选择器都基于这个容器（比如$container.find(...)），这样每个组的操作只会影响自己内部的标签和面板，不会干扰其他组。
• 手风琴取消激活：在点击事件里先判断$currentItem.hasClass('active')，如果是已激活状态，就移除所有标签和面板的active类，实现“收起”效果；如果不是，就正常切换到该标签对应的面板。

这样修改后，你页面上的多组Tabs就能独立切换，而且点击已选中的标签会取消激活啦，完全适配WordPress的环境~

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