Я создаю главное меню в asp.net, используя динамически созданные div.
Дивы связаны с 3 различными уровнями.
Я сделал все, что мне нужно, но борется с расширением и разрушением меню.
Мне нужно показывать только элементы уровня 1 при загрузке страницы (возможно, проще использовать CSS?)
Затем мне нужно будет иметь возможность расширять элементы level2 для определенного элемента level1 при щелчке по этому элементу.
Затем мне придется свернуть их через определенный промежуток времени.
В приведенном ниже коде показано, как создаются div и операторы для определенных уровней:
private void CreateDiv(string divId, string URL, int level)
{
//Attributes for all items
HtmlGenericControl div = new HtmlGenericControl("div");
div.Attributes.Add("id", divId);
div.Controls.Add(
new Label()
{
ID = "lbl" + divId,
Text = divId
});
if (level == 1)
{
div.Attributes.Add("class", "level1");
//Code to expand level 2 items
}
if (level == 2)
{
div.Attributes.Add("class", "level2");
//Code to expand level 3 items
}
if (level == 3) //Specific attributes for level 3 items
{
div.Attributes.Add("class", "level3");
div.Attributes.Add("onclick", "window.open('" + URL + "', 'mywindow');");
}
divMenuleft.Controls.Add(div);
}
Мне удалось решить это сам в конце так:
private void CreateDiv (строка divId, строка URL, int level, string parentid, строка MenuId) {//Атрибуты для всех элементов HtmlGenericControl div = new HtmlGenericControl ("div"); div.Attributes.Add("id", divId);
div.Controls.Add(
new Label()
{
ID = "lbl" + divId,
Text = divId
});
if (level == 1)
{
div.Attributes.Add("class", "level1");
//Code to expand level 2 items
div.Attributes.Add("onclick","expand('p" + MenuId + "');");
}
if (level == 2)
{
div.Attributes.Add("class", "level2 " + "p" + parentid);
//Code to expand level 3 items
div.Attributes.Add("onclick", "javascript:expand('p" + MenuId + "')");
}
if (level == 3) //Specific attributes for level 3 items
{
div.Attributes.Add("class", "level3 " + "p" + parentid);
div.Attributes.Add("onclick", "window.open('" + URL + "', 'mywindow');");
}
divMenuleft.Controls.Add(div);
}
function expand(divref) {
$("." + divref + "").show();
setTimeout(function () {
$("." + divref + "").hide();
}, 15000);
}
$(document).ready(function () {
$(".level2").hide();
$(".level3").hide();
});
CSS:
<style type="text/css">
#content > div {
display: none;
}
#content > div:target {
display: block;
}</style>
HTML: (ссылка на элемент списка)
<ol>
<li>
<a href="#div1">Menu Item MAIN</a></li>
</ol>
HTML:
<div id="div1">
<a>
Menu Item CHILD</a> </div>