为循环渲染的每个元素实现弹窗菜单切换功能求助

数据老陈

2026-5-28

问题分析与修复方案

我帮你排查了代码里的几个关键问题，咱们一步步来搞定：

1. 先修复HTML语法错误（这是导致功能失效的核心原因）

你的代码里有两处语法问题，直接让JS找不到目标元素：

最外层div的id属性未闭合：
原代码：

<div class="col-md-3 col-sm-1 templates" id="item_@item.Form_Id>

修正后：

<div class="col-md-3 col-sm-1 templates" id="item_@item.Form_Id">

.actions-toggle的onclick参数传递错误：
原代码里没有把元素ID作为字符串传递，且语句未闭合：
```
<a onclick="toggle_visibility(item_@item.Form_Id) href="#pop-up" class="actions-toggle">
```
修正后（用单引号包裹ID字符串，同时闭合onclick语句）：
```
<a onclick="toggle_visibility('item_@item.Form_Id')" href="#pop-up" class="actions-toggle">
```

2. 补充必要的CSS样式

你定义了show-action类，但没有给它写具体的显示逻辑，而且默认情况下操作菜单应该是隐藏的，所以需要补充CSS：

/* 默认隐藏操作菜单容器 */
.icon-buttons-wrapper {
  display: none;
}

/* 添加show-action类后显示菜单，这里用通用写法适配所有模板项 */
.templates.show-action .icon-buttons-wrapper {
  display: block;
  /* 可以根据需求调整定位，让菜单悬浮在按钮旁 */
  position: absolute;
  z-index: 100;
  right: 20px;
  top: -120px;
}

3. 优化JS逻辑（基础逻辑没问题，加个调试判断更稳妥）

<script>
function toggle_visibility(elementId) {
  const targetElement = document.getElementById(elementId);
  if (targetElement) {
    targetElement.classList.toggle("show-action");
  } else {
    console.warn(`找不到ID为 ${elementId} 的元素！`);
  }
}
</script>

加个存在性判断，避免找不到元素时控制台报错，方便你调试。