for 循环内的 Razor 页面下拉菜单 - 单击一次即可打开多个下拉菜单

Question

我想为每个 table 行显示下拉菜单。当我将 css 下拉列表放在 for 循环中时，它总是在第一行打开下拉列表，而不管我从后续行中单击任何按钮。

剃须刀页面内的代码：

@foreach(var ind in id)
{
    <td style="white-space: pre-line; text-align: left;">@ind.Key</td>
        <td>@ind.amount</td>
        <td>
            <label for="checkbox">Dropdown menu</label>
            <input id="checkbox" type="checkbox" />
            <ul id="ulmenu">
                <li>@Html.ActionLink("Details", "search", "search", new {search = "id", key = ind.Id})</li>
                <li>@Html.ActionLink("Goto website", "search", "search", new {search = "id", key = Model.key)</li>
            </ul>
     </td >
}

CSS

#ulmenu {
    display: none;
}

#checkbox {
    opacity: 0;
}

#checkbox:checked + ul {
    display: block;
}

Answer 1

问题出在 id 属性上

多个 "ulmenu" 作为具有相同 id 属性的 for 循环（如预期）的结果呈现。单击其中一个复选框时，将打开所有具有 id "ulmenu"

的元素

解决方案：我将下拉样式更改为纯 CSS 而不是复选框方法。

解决方案 2（现有代码）：将 ulmenu 的 id 值更改为动态值而不是静态值，并在 forloop 中包含一段 CSS。

@foreach(var ind in id)
{
    <td style="white-space: pre-line; text-align: left;">@ind.Key</td>
    <td>@ind.amount</td>
    <td>
        <label for="@ind.Id">Dropdown menu</label>
        <input id="@ind.Id" type="checkbox" />
        <ul id="@ind.Id">
            <li>@Html.ActionLink("Details", "search", "search", new {search = "id", key = ind.Id})</li>
            <li>@Html.ActionLink("Goto website", "search", "search", new {search = "id", key = Model.key)</li>
        </ul>
 </td >
#@ind.Id{
  display: none;
}

#@{
  opacity: 0;
}

#@ind.Id:checked + ul {
  display: block;
}
}

for 循环内的 Razor 页面下拉菜单 - 单击一次即可打开多个下拉菜单

Razor page dropdown inside forloop - opens multiple dropdowns on a single click

javascript

css

c#

razor-pages