Jquery 切换每个@项的下拉列表

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

我怎样才能改变这个

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

$（文档）.ready（函数（）{
$（“.name”）。单击（函数（）{
$（“.dropdown”）.fadeToggle（“慢”）；
});
});

表:

<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>

@foreach（Model.project中的var项）
{                            
@:
@项目[“名称”]

选择1
选择2
选择3
选择4
备选案文5

@:
}

它正在切换所有5个选项列表，因为所有5个选项列表都具有相同的类名“dropdown”，因此您可以按任意名称，它们都将切换

一个快速修复方法是使用单击上下文，以便知道要显示/隐藏哪个选项列表

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

这里有一个

---

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

谢谢，我不想在页面第一次运行时打开下拉列表，我该怎么做。简单，只需添加$（“.dropdown”）.hide（）；在$（“.name”）前面。单击部分