不适用于动态HTML菜单的CSS

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或类是用jQuery添加的。