问题描述
最近要写一个像这样左边的这种折叠菜单，但是尝试了很多种方法，都无法实现二级菜单的显示。view部分代码：@foreach(variteminModel){<liclass="level1">@Html.Raw(item.DirectoryContents)<scripttype="text/javascript">$(".level1").click(function(){varcurrentDirectoryID=item.ListID;sumbit(currentDirectoryID)});</script></li>}
显示了一级菜单，之后click事件：<script>functionsumbit(ListID){varpostData={ListID:ListID};$(".level2").empty();$.ajax({type:'POST',url:"~/ServiceCenter/AList",dataType:'json',data:postData,success:function(data){varHelpList=data.Context;for(vari=0;i<HelpList.length;i++){varlistInfo=HelpList[i];vardirectoryContents=listInfo.DirectoryContents;varLevel=listInfo.Level;varfirstDirectoryIdentity=listInfo.FirstDirectoryIdentity;varfirstDirectoryID=listInfo.FirstDirectoryID;DirectoryList+="<ulclass='level2'>";DirectoryList+="<li><ahref='~/ServiceCenter/HelpCategory/?FirstDirectoryID="+firstDirectoryID+"&FirstDirectoryIdentity="+firstDirectoryIdentity+"'>"+directoryContents+"</a></li>";}DirectoryList+="</ul></li>";$(".level2").append(DirectoryList);}});}</script>
controller的代码：publicActionResultAList(FormCollectionform){intreciveListID=int.Parse(form["ListID"]);List<GamesStore.Model.bm_Help_ADirectory>aContextList=null;aContextList=help.bm_Help_ADirectory.Where(x=>x.ListID==reciveListID).ToList();returnJson(new{DirectoryContents=aContextList});}
显示一级菜单的controllerpublicActionResultHelp(){vardb=help.bm_Help_HelpList.ToList();returnView(db);}
显示了一级菜单，点击无反应，无法显示二级菜单，请大家给看看。或则个demo。谢谢！
解决方案
解决方案二：
使用js写，我以前是用ul套ul做出来过,点击就显示相应的ul所以先把样式搞定吧
解决方案三：
建议先把html和css先搞定了，再考虑输出的问题。
解决方案四：
你先拿到所有数据,把css和html写好,然后把二级菜单那块的数据隐藏,点击一级菜单再显示出对应的二级菜单就可以了
解决方案五：
引用1楼qq6648208281的回复:
使用js写，我以前是用ul套ul做出来过,点击就显示相应的ul所以先把样式搞定吧
样式和js已经搞定，就是显示不出二级菜单。
解决方案六：
引用3楼u011762977的回复:
你先拿到所有数据,把css和html写好,然后把二级菜单那块的数据隐藏,点击一级菜单再显示出对应的二级菜单就可以了
如果是数据库动态加载呢？
解决方案七：
//你这个foreach生成的js也太多了而且只是变量不一样而已@foreach(variteminModel){<liclass="level1"data-listid="@item.ListID">@Html.Raw(item.DirectoryContents)</li>}<scripttype="text/javascript">$(".level1").click(function(){varcurrentDirectoryID=$(this).attr("data-listid");sumbit(currentDirectoryID)});</script>你点击的时候后台断点能断到么
解决方案八：
ul里嵌套li用js做，数据结构先确定了
解决方案九：
引用5楼huang_huang118的回复:
Quote: 引用3楼u011762977的回复:
你先拿到所有数据,把css和html写好,然后把二级菜单那块的数据隐藏,点击一级菜单再显示出对应的二级菜单就可以了如果是数据库动态加载呢？
无法断点，不知道哪里出了问题，但是你在二级菜单必须获得一级菜单的父id，才可以显示对应的二级菜单内容不是么？
解决方案十：
我只是想说，这跟mvc没有半毛钱的关系折叠菜单无非是对document的操作，顶多会从服务器获取一下折叠菜单的数据可是关于mvc(4)有任何关系？
解决方案十一：
看上去你的错误是把razor即服务端代码和客户端脚本混合写在一起了。查看最终生成的脚本与你期望的脚本是否一致就知道了，要知道服务端的代码是优先执行的，然后再由浏览器来解析html和js输出到浏览器中。服务端只管做服务端应该做的，你这里的菜单数据源应该是在服务端直接生成好的，类似json之类的数据源，再放到cshtml页面里，由js脚本来解析json，生成菜单的脚本
解决方案十二：
http://www.ztree.me/v3/main.php#_zTreeInfo