JavaScript 问题解决 —— 嵌套三级 tab，点击二级 tab，无法正常显示三级 tab 的解决方案

•  场景介绍：
• 
• 
• 一段总结：二级菜单在点击 tab 时，除了本身的默认显示事件、tab 标签点击事件外，还要控制下面的三级菜单

1. 先取消全部的三级菜单 tab 激活样式，再显示  当前选中的二级菜单 对应的 第一个三级菜单 tab
2. 先隐藏全部的三级菜单内容，再显示 当前选中的二级菜单 对应的 第一个三级菜单内容

• tab 结构：

      <!-- 一级 tab -->
      <div class="pop-up-toggle" style="margin-top: 10px">
        <p class="tab-ninner">土壤</p>
        <p class="tab-ninner">地下水</p>
        <p class="tab-ninner">农村环境整治</p>
      </div>
      <div class="pop-up-toggle-main">
        <!-- 二级 tab -->
        <div class="pop-tab">
          <p class="pop-tab-contain monitor-tab">数量</p>
          <p class="pop-tab-contain monitor-tab">资金</p>
        </div>
        <div class="tab-bottom-contain">
          <!-- 三级 tab -->
          <ul class="env-tab-box">
            <li><a href="#">中央</a></li>
            <li><a href="#" style="margin: 0 8px">省</a></li>
            <li><a href="#">市</a></li>
          </ul>
          <div class="env-tab-contain sub1">数据图表1</div>
          <div class="env-tab-contain sub1">数据图表2</div>
          <div class="env-tab-contain sub1">数据图表3</div>
        </div>
        <div class="tab-bottom-contain">
          <!-- 三级 tab -->
          <ul class="env-tab-box">
            <li><a href="#">中央111</a></li>
            <li><a href="#" style="margin: 0 8px">省</a></li>
            <li><a href="#">市</a></li>
          </ul>
          <div class="env-tab-contain sub2">资金图表1</div>
          <div class="env-tab-contain sub2">资金图表2</div>
          <div class="env-tab-contain sub2">资金图表3</div>
        </div>
      </div>
      <div class="pop-up-toggle-main">地下水</div>
      <div class="pop-up-toggle-main">农村环境整治</div>

• 一级 tab 逻辑：

      // 一级 tab 默认显示内容：
      $(".pop-up-toggle-main").hide().first().show();
      $(".pop-up-toggle p").first().addClass("nactive").show();

      // 点击 tab，隐式迭代（遍历所有 tab）
      $(".pop-up-toggle p").click(function () { 
        // 所有 tab 移除激活类名
        $(".pop-up-toggle p").removeClass("nactive"); 
        // 当前被点击的 tab 增加激活类名
        $(this).addClass("nactive"); 
        // 获取当前点击 tab 的索引
        var index = $(this).index();  
        // console.log(index); // 0,1 
        // 让所有 tab 对应内容隐藏
        $(".pop-up-toggle p").parent().siblings(".pop-up-toggle-main").hide(); 
        // 让索引等于当前被点击 tab 的索引的内容展示
        $(".pop-up-toggle p")
          .parent()
          .siblings(".pop-up-toggle-main")
          .eq(index)
          .show(); 
      });

 

• 二级 tab 逻辑：
• 二级菜单在点击 tab 时，除了本身的默认显示事件、tab 标签点击事件外，还要控制下面的三级菜单：

1. 先取消全部的三级菜单 tab 激活样式，再显示  当前选中的二级菜单 对应的 第一个三级菜单 tab
2. 先隐藏全部的三级菜单内容，再显示 当前选中的二级菜单 对应的 第一个三级菜单内容

      // 二级 tab 默认显示内容：
      $(".tab-bottom-contain").hide().first().show();
      $(".pop-tab-contain").first().addClass("tab-active").show();

      // tab标签点击事件
      $(".pop-tab-contain").click(function () {
        $(".pop-tab-contain").removeClass("tab-active");
        $(this).addClass("tab-active");
        // 当前被点击的 2级菜单
        var index = $(this).index();
        $(".pop-tab-contain").parent().siblings(".tab-bottom-contain").hide();
        $(".pop-tab-contain")
          .parent()
          .siblings(".tab-bottom-contain")
          .eq(index)
          .show();

+++++++++++++++++++++++  下面是关键代码  ++++++++++++++++++++++++
+++++++++++++++++++++++  下面是关键代码  ++++++++++++++++++++++++
+++++++++++++++++++++++  下面是关键代码  ++++++++++++++++++++++++

        // 先取消选中所有 3级菜单，即移除所有三级菜单激活类
        $(".env-tab-box li").removeClass("env-li-active");

        // 再选中 当前选中的 2级菜单的 第1个 3级菜单
        $(".pop-tab-contain")
          .parent()
          .siblings(".tab-bottom-contain")
          .eq(index) // 当前选中的 2级菜单
          .children(".env-tab-box") // 该 2级菜单下的 3级 tab 菜单盒子
          .children("li") // 该 2级菜单下的 3级 tab 菜单
          .first()
          .addClass("env-li-active");
      });

        // 先隐藏全部 3级菜单内容
        $(".pop-tab-contain")
          .parent()
          .siblings(".tab-bottom-contain") // 2级菜单内容
          .children(".env-tab-contain") // 2级菜单内容包裹的 3级菜单内容（不是菜单哦）
          .hide();

        // 再显示当前 2级 对应的 第1个 3级菜单内容 
        $(".pop-tab-contain")
          .parent()
          .siblings(".tab-bottom-contain") // 2级菜单内容
          .eq(index) // 当前被点击的 2级菜单 
          .children(".env-tab-contain") // 2级菜单内容包裹的 3级菜单内容（不是菜单哦）
          .first()
          .show();

 

 

• 三级 tab 逻辑：

      // 三级 tab 默认显示内容：
      $(".env-tab-contain").hide().first().show();
      $(".env-tab-box li").first().addClass("env-li-active");

      // tab标签点击事件
      $(".env-tab-box li").click(function () {
        $(".env-tab-box li").removeClass("env-li-active");
        $(this).addClass("env-li-active");
        var index = $(this).index();
        $(".env-tab-box li").parent().siblings(".env-tab-contain").hide();
        // $(".env-tab-box li")
        $(this).parent().siblings(".env-tab-contain").eq(index).show();
      });