请问mvc4 如何实现折叠菜单

[huang_huang118]

最近要写一个像这样http://aid.5173.com/左边的这种折叠菜单，但是尝试了很多种方法，都无法实现二级菜单的显示。
view部分代码：

 @foreach(var item in Model)
                    {
                        <li class="level1">
                        @Html.Raw(item.DirectoryContents)
                        <script type="text/javascript">
                            $(".level1").click(function () {
                                var currentDirectoryID = item.ListID;
                                sumbit(currentDirectoryID)
                            });
                        </script>
                            </li>
                    }

显示了一级菜单，之后click事件：

<script>              
    function sumbit(ListID) {
        var postData={
            ListID:ListID
        };
        $(".level2").empty();
        $.ajax({
            type: 'POST',
            url: "~/ServiceCenter/AList",
            dataType: 'json',
            data: postData,
            success: function (data) {
                var HelpList = data.Context;
                for (var i = 0; i < HelpList.length; i++) {
                    var listInfo = HelpList[i];
                    var directoryContents = listInfo.DirectoryContents;
                    var Level = listInfo.Level;
                    var firstDirectoryIdentity = listInfo.FirstDirectoryIdentity;
                    var firstDirectoryID = listInfo.FirstDirectoryID;
                    DirectoryList += "<ul class='level2'>";
                    DirectoryList += "<li><a href='~/ServiceCenter/HelpCategory/?FirstDirectoryID=" + firstDirectoryID + "&FirstDirectoryIdentity=" + firstDirectoryIdentity + "'>" + directoryContents + "</a></li>";
                }
                DirectoryList += "</ul></li>";

                $(".level2").append(DirectoryList);
            }
        });
    }
</script>

controller的代码：

       public ActionResult AList(FormCollection form)
        {
            int reciveListID =int.Parse( form["ListID"]);
            List<GamesStore.Model.bm_Help_ADirectory> aContextList = null;
            aContextList = help.bm_Help_ADirectory.Where(x => x.ListID == reciveListID).ToList();
            return Json(new { DirectoryContents =aContextList});
        }

显示一级菜单的 controller

        public ActionResult Help()
        {
            var db = help.bm_Help_HelpList.ToList();
            return View(db);              
        }

显示了一级菜单，点击无反应，无法显示 二级菜单，请大家给看看。
或则个demo。谢谢！

[Yun__]

使用js写，我以前是用ul套ul做出来过,点击就显示相应的ul 所以先把样式搞定吧

[zjc405068789]

建议先把html和css先搞定了，再考虑输出的问题。

[花猫阳]

你先拿到所有数据,把css和html写好,然后把二级菜单那块的数据隐藏,点击一级菜单再显示出对应的二级菜单就可以了

[huang_huang118]

引用 1 楼 qq6648208281 的回复:

使用js写，我以前是用ul套ul做出来过,点击就显示相应的ul 所以先把样式搞定吧

样式和js已经搞定，就是显示不出二级菜单。

[huang_huang118]

引用 3 楼 u011762977 的回复:

你先拿到所有数据,把css和html写好,然后把二级菜单那块的数据隐藏,点击一级菜单再显示出对应的二级菜单就可以了

如果是数据库动态加载呢？

[moonwrite]

//你这个foreach生成的js也太多了 而且只是变量不一样而已 @foreach(var item in Model) { <li class="level1" data-listid="@ item.ListID"> @Html.Raw(item.DirectoryContents) </li> } <script type="text/javascript"> $(".level1").click(function () { var currentDirectoryID =$(this).attr("data-listid"); sumbit(currentDirectoryID) }); </script> 你点击的时候 后台断点能断到么

[Xanl]

ul里嵌套li 用js做，数据结构先确定了

[land_L]

http://www.ztree.me/v3/main.php#_zTreeInfo

[huang_huang118]

引用 5 楼 huang_huang118 的回复:

[quote=引用 3 楼 u011762977 的回复:] 你先拿到所有数据,把css和html写好,然后把二级菜单那块的数据隐藏,点击一级菜单再显示出对应的二级菜单就可以了

如果是数据库动态加载呢？[/quote] 无法断点，不知道哪里出了问题，但是你在二级菜单必须获得一级菜单的父id，才可以显示对应的二级菜单内容不是么？

[跳动de指尖]

我只是想说，这跟mvc没有半毛钱的关系 折叠菜单无非是对document的操作，顶多会从服务器获取一下折叠菜单的数据 可是关于mvc(4)有任何关系？

[无爱大叔]

看上去你的错误是把razor即服务端代码和客户端脚本混合写在一起了。 查看最终生成的脚本与你期望的脚本是否一致就知道了，要知道服务端的代码是优先执行的，然后再由浏览器来解析html和js输出到浏览器中。 服务端只管做服务端应该做的，你这里的菜单数据源应该是在服务端直接生成好的，类似json之类的数据源，再放到cshtml页面里，由js脚本来解析json，生成菜单的脚本