JavaScript多按钮展开问题：仅首个按钮生效的解决求助

问题分析 #

原代码核心问题：

• 仅给第一个按钮绑定了有效点击逻辑，其余按钮事件未实际生效
• 使用全局isOpen变量控制状态，无法区分多个按钮的独立展开/收起状态
• 获取结果、图片元素时仅取到第一个按钮的子元素，无法对应当前点击的按钮

解决方案步骤 #

1. 建立按钮与数组的关联：通过按钮的data-value属性，映射到对应的数据源数组
2. 独立管理每个按钮状态：移除全局状态变量，通过按钮自身的button--active类判断当前状态
3. 操作当前按钮的子元素：在点击事件中，从当前按钮内部查找结果、图片容器，避免全局元素冲突
4. 点击外部关闭所有按钮：点击页面空白区域时，统一移除所有按钮的激活状态

修改后的完整代码 #

HTML #

<div class="wrapper">
  <div class="js-button button button-1" data-value="1">
    Click!
    <div class="js-button-img button-img">
      <img class="js-img" alt="No image!" />
    </div>
    <div class="js-button-result button-result">
      Result
    </div>
  </div>
  <div class="js-button button button-2" data-value="2">
    Click!
    <div class="js-button-img button-img">
      <img class="js-img" alt="No image!" />
    </div>
    <div class="js-button-result button-result">
      Result
    </div>
  </div>
  <div class="js-button button button-3" data-value="3">
    Click!
    <div class="js-button-img button-img">
      <img class="js-img" alt="No image!" />
    </div>
    <div class="js-button-result button-result">
      Result
    </div>
  </div>
</div>

CSS #

* {
  box-sizing: border-box;
  font-size: 16px;
  letter-spacing: 1px;
  font-family: Montserrat, sans-serif;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: auto;
  position: relative;
  width: 30vw;
  height: 30vh;
}

.button {
  padding: 5% 0;
  margin: 10px 0;
  width: 100%;
  height: auto;
  text-align: center;
  border-radius: 0 20px;
  background-color: #dad7cd;
  user-select: none;
  transition: 100ms ease-in-out;
  outline: 0;
}

.button--active {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  height: 100%;
}

.button-result {
  display: none;
}

.button-result--true {
  display: block;
}

.button-img {
  width: 150px;
  height: 0;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  border-radius: 20px;
  overflow: hidden;
  opacity: 0;
  transition: all 0.6s ease-in-out;
}

.button-img--active {
  height: 150px;
  margin: 5% auto;
  opacity: 1;
}

.button:hover {
  outline: 2px solid #a3b18a;
  background-color: #a3b18a;
  outline-offset: 5px;
}

.button:active {
  outline-offset: 8px;
}

JavaScript #

console.clear();
// 定义三个对应按钮的数组
const color = ["red", "green", "blue", "aqua", "black", "purple", "yellow"];
const fruits = [{
    type: "fruit",
    name: "orange",
    img: "https://t4.ftcdn.net/jpg/01/02/31/01/240_F_102310122_TyKkml1yRFle2IGtD2fAUrZLtixIGJqa.jpg"
  },
  {
    type: "fruit",
    name: "apple",
    img: "https://t3.ftcdn.net/jpg/03/10/32/02/240_F_310320273_I9rR1l7918MJoZ0GRHGIBgZl9F9ShEXq.jpg"
  },
  {
    type: "fruit",
    name: "banana",
    img: "https://t3.ftcdn.net/jpg/02/36/07/60/240_F_236076021_Lf2nHzSUcTxNGdG7hap6PjJNDwHT1VfC.jpg"
  },
  {
    type: "fruit",
    name: "mango",
    img: "https://t4.ftcdn.net/jpg/00/52/87/43/240_F_52874381_Ucxx67h9KLuxSXiNGcsmHfSjAuqRXqDr.jpg"
  },
  {
    type: "fruit",
    name: "kiwi",
    img: "https://t4.ftcdn.net/jpg/00/68/65/13/240_F_68651370_CVcQlAdJqvxtL8bIUm70UP1HwnFXOblQ.jpg"
  },
  {
    type: "fruit",
    name: "strawberries",
    img: "https://t4.ftcdn.net/jpg/00/84/36/81/240_F_84368117_irN0O3akL7ALdMe17ZtxH6nya1cHiG5H.jpg"
  },
  {
    type: "fruit",
    name: "grape",
    img: "https://t4.ftcdn.net/jpg/00/70/94/63/240_F_70946377_VJXdpJqld6XOsOTO6lt95ieZSxGO0faM.jpg"
  },
  {
    type: "fruit",
    name: "pear",
    img: ""
  }
];
// 新增第三个示例数组
const animals = ["dog", "cat", "tiger", "elephant", "rabbit"];

// 建立按钮data-value和数组的映射
const dataMap = {
  1: color,
  2: fruits,
  3: animals
};

const btns = document.querySelectorAll(".js-button");

// 给每个按钮绑定点击事件
btns.forEach(btn => {
  btn.addEventListener("click", function(e) {
    e.stopPropagation(); // 阻止事件冒泡到window
    const isActive = this.classList.contains("button--active");
    
    // 先关闭所有按钮的激活状态
    btns.forEach(b => {
      b.classList.remove("button--active");
      b.querySelector(".js-button-img").classList.remove("button-img--active");
      b.querySelector(".js-button-result").classList.remove("button-result--true");
    });
    
    if (!isActive) {
      // 激活当前按钮
      this.classList.add("button--active");
      const imgContainer = this.querySelector(".js-button-img");
      const resultEl = this.querySelector(".js-button-result");
      const imgEl = this.querySelector(".js-img");
      
      imgContainer.classList.add("button-img--active");
      resultEl.classList.add("button-result--true");
      
      // 获取对应数组并生成随机内容
      const dataValue = this.getAttribute("data-value");
      const targetArray = dataMap[dataValue];
      const rand = Math.floor(Math.random() * targetArray.length);
      const item = targetArray[rand];
      
      // 根据数组类型处理展示内容
      if (typeof item === "object") {
        resultEl.textContent = item.name;
        imgEl.src = item.img;
      } else {
        resultEl.textContent = item;
        imgEl.src = ""; // 纯文本数组清空图片
      }
    }
  });
});

// 点击页面其他地方关闭所有按钮
window.addEventListener("click", () => {
  btns.forEach(btn => {
    btn.classList.remove("button--active");
    btn.querySelector(".js-button-img").classList.remove("button-img--active");
    btn.querySelector(".js-button-result").classList.remove("button-result--true");
  });
});

关键改进点 #

• 用dataMap对象建立按钮与数组的对应关系，后续扩展按钮只需添加映射即可
• 点击按钮时先关闭所有激活状态，避免多个按钮同时展开
• 通过this在当前按钮内部查找子元素，确保操作的是对应按钮的内容
• 添加e.stopPropagation()防止点击按钮时触发window的关闭事件

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