使用;用于导航（无法记住状态）

Question

我有一个使用 ul 和 li 的导航菜单。我可以填充它，但一旦发生回发或移动到新页面，它就无法记住其状态。

这是代码：

Masterpage.Master

 <ul id="main-nav">         

            <li> 
                <a href="MPTest2.aspx" class="nav-top-item" runat="server"> 
                Employees
                </a>
                <ul id="mgList" runat="server" >

                </ul>

            </li>
</ul>

MasterPage.Master.cs

protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dt = new DataTable();
        SqlConnection connection = new SqlConnection(@"Data Source= localhost;Initial Catalog=ServerDb;Integrated Security=True");
        connection.Open();
        SqlCommand sqlCmd = new SqlCommand("select EmpName, EmpID from Employee order by EmpName", connection);
        SqlDataAdapter sqlDa = new SqlDataAdapter(sqlCmd);

        sqlDa.Fill(dt);
        connection.Close();
        if (dt.Rows.Count > 0)
        {
            HtmlGenericControl li;

            for (int j = 0; j < dt.Rows.Count; j++)
            {
                li = new HtmlGenericControl("li");

                HtmlAnchor a = new HtmlAnchor();
                a.HRef = "~/MPTest1.aspx?MGID=" + Convert.ToInt32(dt.Rows[j]["EmpID"]);
                a.InnerText = dt.Rows[j]["EmpName"].ToString();
                li.Controls.Add(a);
                mgList.Controls.Add(li);
            }
        }          
    }

JQuery:

$(document).ready(function(){

//Sidebar Accordion Menu:

    $("#main-nav li ul").hide(); // Hide all sub menus


    $("#main-nav li a.nav-top-item").click( // When a top menu item is clicked...
        function() {
            $(this).parent().siblings().find("ul").slideUp("normal"); // Slide up all sub menus except the one clicked
            $(this).next().slideToggle("normal"); // Slide down the clicked sub menu
            return false;
        }
    ); }

现在我知道 hide() 函数隐藏了所有菜单需要第一次调用。但之后我需要一个类或函数来记住菜单的状态（如果它是打开的）而不是折叠所有内容。

如果我能得到一些建议或一些例子，那就太好了。

谢谢

Answer 1

我知道这并不完全是您正在寻找的东西，但它是我用来跟踪我的菜单/子菜单活动的东西。我相信您应该能够使用我在下面提供的前提来显示正确的菜单项。我也可能不理解这个问题，如果是这样，请告诉我，我会尽力提供进一步的帮助。下面的示例与 Razor MVC3 一起使用。

我还想指出，我将自己限制为这段代码的两级菜单，如果您使用的菜单超出了两级，则应该修改代码以使其递归更加稳健。

$(function () {
        $("#menu li a[href='@Request.Url.LocalPath'],#menu li a[href='@(Request.Url.PathAndQuery)']").parent("li").addClass("current_page_item");
        $("li.current_page_item").parent("ul").parent("li").addClass("current_page_item");
    });

在您下面评论的主题中，我相信您可以做类似以下的事情，这并不完美，但可能会给您一个正确方向的开始。

[WebMethod]
public static string MarkOpened(string id)
{
    HttpContext.Current.Session["currentPage"] = id
}       

$(document).ready(function(){
    $("#main-nav li a.nav-top-item:<%= HttpContext.Current.Session["currentPage"] %>").next().slideToggle("normal"); 
    $("#main-nav li a.nav-top-item").click(function(){
        $.ajax({
            type: "POST",
            url: location.href + "/MarkOpened",
            contentType: "application/json; charset=utf-8",
            data: "{ 'id':'" + $(this).attr("something") + "'}",
            dataType: "json"
        });
    };
); }

Answer 2

您可以使用 cookie 来存储状态更改，并在页面加载时重新加载它。如果您不想诉诸默认的 JavaScript 内容，可以使用一个用于 cookie 管理的 jQuery 插件。