Как я могу настроить Javascript динамически, чтобы расширить div при нажатии другого div?

Question

Как я могу настроить Javascript динамически, чтобы расширить div при нажатии другого div?

0

Я создаю главное меню в 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);

    }

connersz 14 апр. 2014, в 13:18

Источник

0

Почему бы не использовать некоторые CSS там?
josh.thomson 14 апр. 2014, в 10:38
0

В Интернете есть много примеров ... ищите «слайдер», вы должны найти CSS для элементов скользящего меню (расширяется). Мне нравится использовать сам старый трюк #divX ... вы пишете css для страницы примерно так:
josh.thomson 14 апр. 2014, в 10:40
0

Да, я их видел, но для каждого идентификатора родительского меню мне потребуется отдельный класс, чтобы убедиться, что раскрываются только правильные дочерние элементы. Ну, это я все равно представляю.
connersz 14 апр. 2014, в 10:41
0

Вы можете просто использовать массив для создания идентификаторов (обратите внимание, что в этот код может быть развернут только один элемент)
josh.thomson 14 апр. 2014, в 10:45

Показать ещё 2 комментария

Теги:

c#

javascript

html

css

asp.net

2 ответа

0

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>

josh.thomson 14 апр. 2014, в 08:53

0

Это очень простой общий способ отображения элементов списка, к сожалению, он не имеет ничего общего с настройкой, которую я разместил выше. В конце концов мне удалось решить проблему самостоятельно, но спасибо за помощь.
connersz 14 апр. 2014, в 11:54

Ещё вопросы

Почему бы не использовать некоторые CSS там?
В Интернете есть много примеров ... ищите «слайдер», вы должны найти CSS для элементов скользящего меню (расширяется). Мне нравится использовать сам старый трюк #divX ... вы пишете css для страницы примерно так:
Да, я их видел, но для каждого идентификатора родительского меню мне потребуется отдельный класс, чтобы убедиться, что раскрываются только правильные дочерние элементы. Ну, это я все равно представляю.
Вы можете просто использовать массив для создания идентификаторов (обратите внимание, что в этот код может быть развернут только один элемент)
Это очень простой общий способ отображения элементов списка, к сожалению, он не имеет ничего общего с настройкой, которую я разместил выше. В конце концов мне удалось решить проблему самостоятельно, но спасибо за помощь.

connersz · Accepted Answer · 2014-04-14T09-34-00.000Z

Мне удалось решить это сам в конце так:

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();

            });