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

<script>
$(document).ready(function(){
  $("img").click(function(){
    $("p").toggle();
  });
});
</script>

当然，如果您有多个图像和段落，则选择器需要更具体。但是你的代码没有显示段落，所以我无法为此创建一个例子。

Answer 2

由于您没有提供足够的信息，此时最佳选择器是：

$(document).ready(function(){
    $("td.image img").click(function(){
        $("p").toggle();
    });
});

编辑：根据您添加的HTML，您需要使用：

$(document).ready(function(){
    $("td.image img").click(function(){
        $(this).closest('.image').siblings('.dropdown').toggle();
    });
});

设置图像上的切换

2 个答案: