如何使用Javascript设置菜单的切换视图

我正在使用数据库中菜单的动态绑定。。。。我已使用以下代码成功绑定菜单。我需要的是使用javascript为这个菜单设置一个切换视图。。有人能推荐我使用javascript进行切换吗 代码：

@{List menulist=ViewBag.Menu；}

@foreach（menulist.Where中的var mp（p=>p.ParentMenu\u Id==0））{
@Html.ActionLink（@mp.Name，@mp.ActionName，@mp.ControllerName）
@if（menulist.Count（p=>p.ParentMenu\u Id==mp.Id）>0）
{@:
}
@RenderNuItem（菜单列表，mp）
@如果（menulist.Count（p=>p.ParentMenu\u Id==mp.Id）>0）{@:
}
}

@helper RenderMenuItem（列表菜单列表，MenuRazor.Models.MenuItem mi）
{
foreach（menuList.Where中的var cp（p=>p.ParentMenu\u Id==mi.Id））{
@ActionLink（@cp.Name、@cp.ActionName、@cp.ControllerName，新的{@style=“color:Red；”}）
如果（menuList.Count（p=>p.ParentMenu\u Id==cp.Id）>0）{
@：

} 
@RenderNuItem（菜单列表，cp）
如果（menuList.Count（p=>p.ParentMenu\u Id==cp.Id）>0）{
@：
}否则{
@：
}  
} }   

你所说的“切换”到底是什么意思？躲藏？。。。显示？。。。二者都整个菜单的行为？。。。对于单个项目？。。。等等，我需要展示和隐藏。。。第一次单击时，它应展开，第二次单击时，它应折叠

 <nav> @{ List<MenuRazor.Models.MenuItem> menulist = ViewBag.Menu; } 
<ul id="menu">  
    @foreach (var mp in menulist.Where(p => p.ParentMenu_Id == 0)) {
    <li>  @Html.ActionLink(@mp.Name, @mp.ActionName, @mp.ControllerName) 
        @if (menulist.Count(p => p.ParentMenu_Id == mp.Id) > 0)
        { @:<ul> }  
          @RenderMenuItem(menulist, mp)  
          @if (menulist.Count(p => p.ParentMenu_Id == mp.Id) > 0){@:</ul> } 
    </li> } 
</ul> 

@helper RenderMenuItem(List<MenuRazor.Models.MenuItem> menuList, MenuRazor.Models.MenuItem mi) 
{
    foreach (var cp in menuList.Where(p => p.ParentMenu_Id == mi.Id)) {
         @Html.ActionLink(@cp.Name, @cp.ActionName, @cp.ControllerName,new { @style="color:Red;" })

        if (menuList.Count(p => p.ParentMenu_Id == cp.Id) > 0) { 
            @:<ul> 
        } 
        @RenderMenuItem(menuList, cp) 
        if (menuList.Count(p => p.ParentMenu_Id == cp.Id) > 0) { 
           @:</ul> 
        } else  { 
           @:</li> 
        }  
} }   </nav>