未将 css 应用于动态 html 菜单

Question

我有一个动态菜单，它是在 Page_Load 事件中从数据库创建的。
当我的页面被加载时，我的页面会出现一秒钟或更短的时间，如下所示：

然后：

我该如何解决这个问题？

我背后的代码：

public void Page_Load(object sender, EventArgs e)
{
    Database db = new Database();

    if (!IsPostBack)
    {
        string queryMenu =
            "select a.CatId,c.CatName,a.ParentId,b.totalSubCats from ProductCategory as a LEFT OUTER JOIN (select ParentId,count(*) as totalSubCats  from ProductCategory group by ParentId) as b on a.CatId=b.ParentId LEFT OUTER JOIN ProductCategory as c on a.CatId = c.CatId ORDER BY a.CatId";
        SqlCommand smd = new SqlCommand(queryMenu, db.sc);
        DataTable dt = new DataTable();
        dt.Load(smd.ExecuteReader());
        this.createMenu(dt, 0);
    }
}


private void createMenu(DataTable dt, int pID)
{
    LiteralMenu.Text = LiteralMenu.Text + "<ul>";
    for (int i = 0; i < dt.Rows.Count; i++)
    {
        if (Convert.ToInt32(dt.Rows[i]["ParentId"]) == pID)
        {
            LiteralMenu.Text = LiteralMenu.Text + "<li><a href='/category/" + dt.Rows[i]["CatId"].ToString() + "'>" +
                dt.Rows[i]["CatName"].ToString() + "</a>";
            if (dt.Rows[i]["totalSubCats"] != DBNull.Value)
                this.createMenu(dt, Convert.ToInt32(dt.Rows[i]["CatId"]));
            LiteralMenu.Text = LiteralMenu.Text + "</li>";
        }
    }
    LiteralMenu.Text = LiteralMenu.Text + "</ul>";
}

Answer 1

可能有更简洁的解决方案，但每当我遇到此类问题时，我都会在 CSS 中将下拉内容设置为 display: none;，然后让 JavaScript 将其改回display: block;（或任何需要的）在页面加载时。这样您就不会等待 JavaScript 执行来隐藏内容 - 现在正好相反。

Answer 2

我之前遇到过同样的问题，我想，您在 css 文件中使用的 id 或 class 是用 jQuery.

添加的

未将 css 应用于动态 html 菜单

doesn't apply css to dynamic html menu

css

asp.net

menu

pageload