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

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

Answer 2

我知道这不是你想要的，但它是我用来跟踪菜单/子菜单活动性的。我相信你应该能够使用我在下面提供的前提来显示正确的菜单项。我可能也不理解这个问题，如果是这种情况请告诉我，我会尽力帮助你。以下示例与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"
        });
    };
); }

使用<ul>进行导航（不记得状态）</ul>

2 个答案: