为何循环中Tooltip点击外部关闭功能仅首个元素生效？

你遇到的是典型的函数作用域变量导致的闭包陷阱——用var声明的循环变量i是函数级作用域的，整个循环执行完毕后，i的值会变成dropdownButton.length（也就是遍历完所有按钮后的索引值）。当window的点击事件触发时，所有绑定的事件处理函数都会访问这个已经变成最终值的i，这时候dropdownButton[i]其实已经超出数组范围（等于undefined），自然无法正确控制后续的Tooltip面板。

方案1：用let替代var声明循环变量（最简单的ES6写法） #

let是块级作用域变量，每次循环都会创建一个独立的i变量，每个事件处理函数都会捕获当前迭代的i值，不会出现共享变量的问题：

// Dropdown to show or hide tooltip
var dropdownButton = document.getElementsByClassName("dropdown__btn");
// 把var改成let，让i成为块级作用域变量
for (let i = 0; i < dropdownButton.length; i++) {
  // 点击按钮切换显示/隐藏
  dropdownButton[i].addEventListener("click", function() {
    var panel = this.nextElementSibling;
    // 用toggle简化类名切换逻辑
    panel.classList.toggle("is-hidden");
  });
  // 点击页面其他区域关闭面板
  window.addEventListener('click', function(e) {
    const btn = dropdownButton[i];
    const panel = btn.nextElementSibling;
    // 排除按钮和面板本身的点击
    if (!btn.contains(e.target) && !panel.contains(e.target)) {
      panel.classList.add("is-hidden");
    }
    // 移除不必要的stopPropagation，避免影响其他事件
  });
}

方案2：用闭包保存迭代状态（兼容旧浏览器） #

如果需要兼容不支持ES6的环境，可以用立即执行函数表达式（IIFE）包裹循环内的代码，为每个迭代创建独立作用域：

var dropdownButton = document.getElementsByClassName("dropdown__btn");
for (var i = 0; i < dropdownButton.length; i++) {
  // 用IIFE保存当前迭代的index值
  (function(index) {
    dropdownButton[index].addEventListener("click", function() {
      var panel = this.nextElementSibling;
      panel.classList.toggle("is-hidden");
    });

    window.addEventListener('click', function(e) {
      const btn = dropdownButton[index];
      const panel = btn.nextElementSibling;
      if (!btn.contains(e.target) && !panel.contains(e.target)) {
        panel.classList.add("is-hidden");
      }
    });
  })(i);
}

额外优化说明 #

1. 用classList.toggle()替代手动判断类名，代码更简洁。
2. 新增了面板区域的判断：点击Tooltip面板内部时不会关闭，更符合交互直觉。
3. 移除了原代码中的e.stopPropagation()，避免阻止页面其他元素的事件冒泡。

你的CSS和HTML可以保持不变，也可以复制多组Tooltip结构测试效果：

.is-hidden { display: none; }

<p class="dropdown__btn">x</p>
<div class="dropdown__panel is-hidden">
  <p>Renew automatically on every expiration date.</p>
</div>

<p class="dropdown__btn">y</p>
<div class="dropdown__panel is-hidden">
  <p>Another tooltip content for testing.</p>
</div>

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