使用jQuery实现点击切换显隐元素，自动关闭已激活内容

嘿，我来帮你搞定这个需求！你现在的自动隐藏功能已经有了基础的点击切换逻辑，要实现主题切换时关闭所有激活的显示内容，我们可以通过统一管理可切换元素、优化事件绑定来实现，具体步骤和代码如下：

问题回顾 #

你正在开发的功能支持用户点击链接显示/隐藏对应项目，现在需要添加逻辑：当用户切换不同主题时，自动关闭所有当前处于显示状态的内容。

现有代码（整理后） #

<!DOCTYPE html> 
<html> 
<head> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
  <script> 
    $(document).ready(function(){ 
      $("#myp-0").click(function(){ 
        $("#loose-0").toggle(600); 
      }); 
      // 这里应该还有其他类似的单个元素绑定...
    }); 
  </script>
</head>
<body>
  <!-- 示例链接和内容 -->
  <a href="javascript:void(0)" id="myp-0">切换项目0</a>
  <div id="loose-0" style="display:none;">项目0的内容</div>
  
  <!-- 主题切换元素示例 -->
  <button class="theme-switcher" data-theme="light">浅色主题</button>
  <button class="theme-switcher" data-theme="dark">深色主题</button>
</body>
</html>

解决方案 #

1. 统一类名，方便批量控制 #

首先给所有可切换的内容元素加上统一的类名（比如.toggle-content），给触发切换的链接也加统一类名（比如.toggle-trigger），这样不用给每个元素单独写事件，也方便后续批量操作。

2. 优化点击切换事件 #

用类选择器绑定点击事件，通过自定义属性关联触发元素和目标内容，让代码更简洁可扩展。

3. 添加主题切换时的关闭逻辑 #

给所有主题切换元素绑定事件，当切换主题时，遍历所有.toggle-content，如果当前是显示状态，就将其隐藏。

完整实现代码 #

<!DOCTYPE html> 
<html> 
<head> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
  <script> 
    $(document).ready(function(){ 
      // 统一绑定切换显示/隐藏的事件
      $(".toggle-trigger").click(function(){
        // 通过data-target属性获取要切换的内容ID
        const targetId = $(this).data("target");
        $(targetId).toggle(600);
      });

      // 主题切换时关闭所有激活的内容
      $(".theme-switcher").click(function(){
        // 遍历所有可切换内容，隐藏当前显示的
        $(".toggle-content").each(function(){
          if($(this).is(":visible")){
            $(this).hide(600);
          }
        });

        // 这里可以添加你的主题切换逻辑，比如切换CSS类、修改样式等
        const selectedTheme = $(this).data("theme");
        console.log("切换到主题：", selectedTheme);
        // 示例：给body添加主题类
        $("body").removeClass("light dark").addClass(selectedTheme);
      });
    }); 
  </script>
  <style>
    /* 主题样式示例 */
    .light { background-color: #fff; color: #333; }
    .dark { background-color: #333; color: #fff; }
    .toggle-content { margin: 10px 0; padding: 10px; border: 1px solid #ccc; }
  </style>
</head>
<body class="light">
  <!-- 优化后的切换链接和内容 -->
  <a href="javascript:void(0)" class="toggle-trigger" data-target="#loose-0">切换项目0</a>
  <div id="loose-0" class="toggle-content" style="display:none;">项目0的内容</div>

  <a href="javascript:void(0)" class="toggle-trigger" data-target="#loose-1">切换项目1</a>
  <div id="loose-1" class="toggle-content" style="display:none;">项目1的内容</div>
  
  <!-- 主题切换按钮 -->
  <button class="theme-switcher" data-theme="light">浅色主题</button>
  <button class="theme-switcher" data-theme="dark">深色主题</button>
</body>
</html>

代码说明 #

• 统一类名与自定义属性：.toggle-trigger和.toggle-content分别标识触发元素和内容元素，data-target属性关联两者，新增项目时只需复制结构，不用修改JS代码。
• 主题切换逻辑：点击主题按钮时，通过.each()遍历所有内容元素，用:visible判断是否显示，若显示则调用hide(600)关闭，保持动画一致性。
• 可扩展性：后续新增切换项目或主题，只需添加对应HTML元素即可，无需改动核心JS逻辑。

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