JavaScript点击显隐脚本修改需求：实现同触发器切换显隐

嘿，我完全get你的需求：现在要让同一个触发器点击时能切换目标div的显示/隐藏状态，同时保留「点击其他触发器时自动隐藏已显示div」的原有逻辑，而且得尽量少改动已经在多页面部署的现有脚本对吧？

先假设你现有的核心脚本大概是这个样子（根据你提到的#showall推测）：

jQuery(function() {
  jQuery('#showall').click(function() {
    // 原有逻辑：先隐藏所有目标div，再显示当前对应的那个
    jQuery('.target-div').hide();
    jQuery('#target-1').show();
  });
  // 其他类似的触发器绑定...
});

要实现同一触发器的点击切换，只需要在每个触发器的点击事件里，加个「判断当前目标div状态」的逻辑就行，不用大动整体结构：

核心修改方案（通用版） #

如果你的触发器和目标div可以通过data-target属性关联（只需要给现有HTML加个属性，完全不破坏原有结构），修改后的脚本是这样：

jQuery(function() {
  // 给所有触发器绑定点击事件（如果原来用的是ID绑定，改成类选择器更灵活）
  jQuery('.trigger').click(function() {
    // 获取当前触发器对应的目标div选择器
    var targetSelector = jQuery(this).data('target');
    var $currentTarget = jQuery(targetSelector);

    // 第一步：隐藏所有**非当前**的目标div（保留原有逻辑）
    jQuery('.target-div').not($currentTarget).hide();

    // 第二步：切换当前目标div的显示状态——显示变隐藏，隐藏变显示
    $currentTarget.toggle();
  });
});

对应的HTML小调整（可选，不影响原有布局） #

给你的触发器div加个data-target属性，指向对应目标div的ID：

<!-- 原有触发器，加个data-target就行 -->
<div class="trigger" id="showall" data-target="#target-1">图标1</div>
<div class="trigger" data-target="#target-2">图标2</div>

<!-- 原有目标div，保持初始隐藏状态 -->
<div class="target-div" id="target-1" style="display: none;">内容1</div>
<div class="target-div" id="target-2" style="display: none;">内容2</div>

如果你的现有脚本是硬绑定单个ID（比如只有#showall），可以这样改 #

如果是单个触发器的场景，直接修改对应的点击事件逻辑就行：

jQuery(function() {
  jQuery('#showall').click(function() {
    var $target = jQuery('#target-1');
    // 隐藏其他可能显示的目标div（如果有的话）
    jQuery('.target-div').not($target).hide();
    // 切换当前目标的显示状态
    $target.toggle();
  });
});

为什么这么改？ #

• 最小改动：只替换了原有脚本里的show()为toggle()，加上了排除当前目标的隐藏逻辑，完全兼容现有页面的其他代码
• 保留原有功能：点击其他触发器时，已显示的div依然会自动隐藏
• 新增toggle功能：同一触发器点击第一次显示，第二次隐藏，完美符合你的需求

要是你的现有脚本里还有动画、回调之类的额外逻辑，只需要把toggle()换成toggle(speed, callback)就行，比如$currentTarget.toggle(300)就能加个渐显渐隐的动画。

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