点击Ellipsis按钮时Report Div无法显示的问题求助

核心问题1：ID重复违反HTML规范 #

HTML中ID必须唯一，你现在两个卡片里都用了id="report"，这会导致浏览器仅识别第一个ID对应的元素，JS和CSS的选择器都会失效。必须把ID改为class，用类来统一控制样式和选择元素。

核心问题2：JS元素选择逻辑错误 #

event.currentTarget指向的是点击的.ellipsis按钮，按钮内部并没有#report元素，所以querySelector会返回null，自然无法切换类名。需要先定位到按钮的父容器（.flag），再从中获取对应的report元素。

修复后的完整代码 #

HTML（替换ID为class）

<div class="main">
  <div class="card">
    <h4>Card</h4>
    <div class="flag">
    <button class="ellipsis">&#8942</button>
    <div class="report">
      <p>Report</p>
      <p>Not-Interested</p>
    </div>
  </div>
  </div>
  <div class="card">
    <h4>Card</h4>
    <div class="flag">
    <button class="ellipsis">&#8942</button>
    <div class="report">
      <p>Report</p>
      <p>Not-Interested</p>
    </div>
  </div>
  </div>
</div>

CSS（替换ID选择器为class）

.main{
  margin:0;
  padding:0;
  display:flex;
  gap:20px;
}
.card{
  width: 150px;
  height:200px;
  background: coral;
  border:1px solid #000;
  position:relative;
}
.card h4{
  color:#fff;
  top:35%;
  left:40%;
  position:absolute;
}
.card .flag {
  top:0;
  right:15px;
  position:absolute;
}
.flag .report{
  display:none;
  float:left;
  background: #fff;
  padding:0;
  margin-top: 27px;
  margin-right: -5px;
}
.flag .report.show{
  display:block;
}
.card .flag button{
  border:0;
  background:0;
  outline:0;
  font-size:25px;
  color:#fff;
  position:absolute;
}
.report p{
 padding: 2px 5px;
  top:-10px;
  font-size:10px;
  line-height:0.1rem;
  cursor:pointer;
}

JS（修正元素选择逻辑）

const ellipsis = document.querySelectorAll(".ellipsis");
ellipsis.forEach((el) =>
  el.addEventListener("click", (event) => {
    // 定位按钮所在的父容器.flag，再获取内部的.report元素
    const report = event.currentTarget.closest('.flag').querySelector(".report");
    report.classList.toggle("show");
  })
)

额外说明 #

• 用closest('.flag')精准定位按钮所在的父容器，确保只操作当前卡片内的report元素，避免干扰其他卡片；
• 统一使用class控制样式和元素选择，既符合HTML规范，又能保证多个卡片的功能独立生效。

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