导航到另一页时保留子菜单的打开/关闭状态

时间:2013-01-25 18:51:20

标签: asp.net-mvc

我有一个asp.net mvc4解决方案。

我左边有一个菜单。默认情况下,此菜单已关闭。

enter image description here

如果我点击某个项目,则会显示一个子菜单。

enter image description here

问题是当我导航到另一个页面时,忘记了子菜单的打开/关闭状态。显示新页面,所有子菜单仍然关闭。我想保留这些子菜单的opend / closed状态。我该怎么办?

以下是我左侧菜单的一部分:

<div class="page-sidebar">
    <ul>
        <li class="dropdown" data-role="dropdown">
            <a><i class="icon-flip-2"></i> Transports</a>
            <ul class="sub-menu light sidebar-dropdown-menu">
                <li>@Html.ActionLink("En cours", "SearchTransportsAA", "Transp")</a></li>
                <li>@Html.ActionLink("Passés", "SearchTransportsBB", "Transp")</a></li>
                <li>@Html.ActionLink("Factures", "SearchTransportsCC", "Transp")</a></li>
            </ul>
        </li>
        <li class="dropdown" data-role="dropdown">
            <a><i class="icon-drawer-2"></i> Autorisations</a>
            <ul class="sub-menu light sidebar-dropdown-menu open">
                <li>@Html.ActionLink("Valides", "SearchAutorisAA", "Transp")</a></li>
                <li>@Html.ActionLink("Périmés", "SearchAutorisBB", "Transp")</a></li>
                <li>@Html.ActionLink("Recherche", "SearchAutorisCC", "Transp")</a></li>
            </ul>
        </li>
        ...
        ...

如上所示,当'打开'添加到班级时,菜单会标记为已打开。

2 个答案:

答案 0 :(得分:0)

您可以这样做的一种方法是让具有此侧边菜单的视图继承自具有包含所选子菜单项的属性的模型

public class ViewWithSideMenu
{
    public ViewWithSideMenu(string menuItem)
    {
       MenuItem = menuItem;
    }

    public string MenuItem { get;set; }
}

视图模型:

public class MyViewmModel : ViewWithSideMenu
{
    public MyViewmModel() : base("someMenu") {}
}

查看:

<ul class="sub-menu light sidebar-dropdown-menu@(Model.MenuItem == "someMenu"? " open" : "")">

这种方法只会打开基于我们所在页面的菜单,它不会真正记住用户点击的内容,如果保持用户选择非常重要,则有2个选项,

  • 随着每个请求(不是很好,开销太大)继续将它们发送回服务器
  • 继续使用ajax请求更新内容,而不是完全重新加载页面,在这种情况下,您保持菜单不变,并将所有请求转换为ajax,并使用ajax响应替换内容

答案 1 :(得分:0)

你可以试试这个,它对我有用:D

<script type="text/javascript">
    $(document).ready(function () {
        $("a[href='"+ window.location.pathname +"']").parents(".hidden-ul").css("display", "block");
    });
</script>