Невозможно добавить новый блок в динамическое меню

@NikolayPC · Регистрация: 29.06.2014

Студворк — интернет-сервис помощи студентам

Ради эксперимента решил написать динамическое меню. Меню работает. Но добавить новый блок, уже не возможно, потому что перестает работать один из блоков id которого не совпадает с описанным в скрипте. Как его доработать проблемный скрипт что бы при добавлении нового разворачивались оба.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
   <html>
    <head>
        <title>Домашний бухгалтер 1.0</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <style>
            .menu ul {
                         margin: 0;
                         list-style: none;
                         padding-left: 5px;
                         display: none;
                     }
                 .menu .title {
                                font-size: 80px;
                                cursor: pointer;
                              }
                 .menu .title::before {
                                             content: url(img/close.png);
                                             font-size: 100%;
                                             color: green;
                                      }
                 .menu.clik .title::before  {
                                                 content: url(img/open.png);
                                            }
                .menu.clik ul {
                                    display: block;
                              }
                     .licat:hover {
                                      background:#51AE3A;
                                  }
            .menu li {
                         font-size: 25px;
                         border-style: outset;
                         border-color: #CCFFCC;
                         border-width: 5px ;
                         border-height: 5px;
                     }
            
         </style>
        <style>
             div {
                      width: 350px;
                      height:80px;
                      border-style: solid;
                      border-width: 8px;
                      border-color: #33CCFF;
                      background-color: #9933FF;
                 }
        </style>
</head>
<body>
<div id="clicked" class="menu">
    <span class="title">Меню</span>
    <ul>
      <li  class="licat" >Учет газа</li>
      <li class="licat">Учет воды</li>
      <li class="licat">Учет електроснабжения</li>
      <li class="licat">Телефония и Интеррнет</li>
    </ul>
</div>
<script>
    alert("Меню закрыто.Для того чтобы его открыть нажмите на "Меню" или на стреке рядом.");
</script>
<script>
    var menuElem = document.getElementById('clicked');//Как я понимаю здесь скрипт находит элемент по id 
      var titleElem = menuElem.querySelector('.title');//видимо строит список дочерних элементов 
      titleElem.onclick = function () {
          menuElem.classList.toggle('clik'); //Как зациклить или преобразовать script добавив каких-то функций, чтоб при  
                                                        //  изменении количества блоков не страдала их функциональность. Сейчас при 
                                                       //добавлении работает только один блок второй не разворачивается. 
 
    };
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
    $('span')
    .data('counter', 0)
    .click(function () {
        var counter = $(this).data('counter');
        $(this).data('counter', counter + 1);
        if (counter == 0 || counter % 2 == 0) {
            alert("Меню открыто. Для того чтобы его закрыть нажмите на "Меню" или на стреке рядом.");
        }
        else {
            alert("Меню закрыто.Для того чтобы его открыть нажмите на "Меню" или на стреке рядом.");
        }
    });
</script>
</body>
</html>

@massEffect · 22.07.2016, 21:17

Вы подразумевали сделать подобное:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<html>
<head>
    <title>Домашний бухгалтер 1.0</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <style>
        .menu{
            display:inline-block;
            vertical-align: top;
        }
        .menu ul {
            margin: 0;
            list-style: none;
            padding-left: 5px;
            display: none;
        }
        .menu .title {
            font-size: 80px;
            cursor: pointer;
        }
        .menu .title::before {
            content: url(img/close.png);
            font-size: 100%;
            color: green;
        }
        .menu.clik .title::before  {
            content: url(img/open.png);
        }
        .menu.clik ul {
            display: block;
        }
        .licat:hover {
            background:#51AE3A;
        }
        .menu li {
            font-size: 25px;
            border-style: outset;
            border-color: #CCFFCC;
            border-width: 5px ;
            border-height: 5px;
        }
 
    </style>
    <style>
        div {
            width: 350px;
            height:80px;
            border-style: solid;
            border-width: 8px;
            border-color: #33CCFF;
            background-color: #9933FF;
        }
    </style>
</head>
<body>
<div  class="menu">
    <span class="title">Меню</span>
    <ul>
        <li  class="licat" >Учет газа</li>
        <li class="licat">Учет воды</li>
        <li class="licat">Учет електроснабжения</li>
        <li class="licat">Телефония и Интеррнет</li>
        <li class="licat">Учет електроснабжения</li>
        <li class="licat">Телефония и Интеррнет</li>
    </ul>
</div>
<div  class="menu">
    <span class="title">Меню</span>
    <ul>
        <li  class="licat" >Учет газа</li>
        <li class="licat">Учет воды</li>
    </ul>
</div>
<div  class="menu">
    <span class="title">Меню</span>
    <ul>
        <li  class="licat" >Учет газа</li>
        <li class="licat">Учет воды</li>
        <li class="licat">Учет електроснабжения</li>
    </ul>
</div>
 
 
<script>
    var arrMenuElem = document.getElementsByClassName('menu');
    for(var i = 0; i < arrMenuElem.length; i++){
        var titleElem = arrMenuElem[i].querySelector('.title');
        (function(i){
            titleElem.onclick = function () {
            arrMenuElem[i].classList.toggle('clik');
            };
        }(i));
    };
 
</script>
 
</body>
</html></html>

или я неправильно понял?

@NikolayPC · 23.07.2016, 11:48 **[ТС]**

Спасибо, это именно то что я подразумевал сделать.

Новые блоги и статьи Все статьи Все блоги /
Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .
Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .

@NikolayPC 0 / 0 / 1 Регистрация: 29.06.2014 Сообщений: 48
	23.07.2016, 11:48 [ТС]
	Спасибо, это именно то что я подразумевал сделать. 0