Question

我需要以下代码来切换@item [“name”]。但是下拉列表显示所有项目（5个条目），而不是一次显示一个。

我该如何改变呢？

<script>
    $(document).ready(function () {
        $(".name").click(function () {
            $(".dropdown").fadeToggle("slow");
        });
    });
</script>

表：

<table class="diag" style="background: url('.png');border:none">
     <tbody>
          @foreach (var item in Model.project)
          {                            
               @:<tr>
                 <td class="image">
                     <img src="@item["image"]" />
                 </td>
                 <td class="name">@item["name"]</td>

                 <td class="dropdown">
                    <ul>
                       <li>Option 1</li>
                       <li>Option 2</li>
                       <li>Option 3</li>
                       <li>Option 4</li>
                       <li>Option 5</li>
                    </ul>
                </td>

              @:</tr>
           }
     </tbody>
</table>

Answer 1

它正在切换所有5个，因为所有5个选项列表都具有相同的类名“下拉列表”，因此您点击任意名称，它们都会切换

快速解决方法是使用点击的上下文，以便您知道要显示/隐藏的选项列表

$(document).ready(function () {
    $(".dropdown").hide();
    $(".name").click(function () {
         $(this).next(".dropdown").fadeToggle("slow");
    });
});

这是jsfiddle showing it in action

编辑：根据以下评论添加了初始隐藏

切换每个@item的下拉列表

1 个答案: