使用& lt; ul>用于导航(不能记住状态)

本文关键字：不能 状态 导航 用于 lt ul 使用 | 更新日期: 2023-09-27 18:10:22

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

代码如下:

Masterpage。 

 <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()函数隐藏了所有需要第一次调用的菜单。但在那之后，我需要一个类或函数来记住菜单的状态，如果它是打开的，而不是崩溃的一切。

如果你能给我一些建议或例子就太好了。

谢谢

使用& lt; ul>用于导航(不能记住状态)

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

您可以使用cookie来存储状态变化，并在页面加载时重新加载它。如果你不想使用默认的JavaScript，可以使用jQuery插件来管理cookie

相关文章：