Показать/скрыть содержимое списка/подсписка

@MsGuns · Регистрация: 04.04.2011

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

Здравствуйте !
Как показать или скрыть всех дочек элемента списка li ?

Спасибо за помощь и советы

Добавлено через 47 секунд
Пожалуйста, без JQuery

@klyapa · 11.07.2021, 22:05

JavaScript
1
2
3
4
const childLi = document.querySelectorAll('li > *');
 
childLi.forEach(elem => elem.style.visibility = 'hidden'); // скрыть
childLi.forEach(elem => elem.style.visibility = 'visible'); // показать

@MsGuns · 12.07.2021, 02:13 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<ul>
   <li>Номер 1</li>
       <ul>
           <li>Номер 1-1</li>
           <li>Номер 1-2</li>
       </ul>
   <li>Номер 2</li>
       <ul>
           <li>Номер 2-1</li>
           <li>Номер 2-2</li>
       </ul>
</ul>

При клике на li нужно либо показывать ее деток, если они не видны, либо - наоборот, - прятать

Добавлено через 3 минуты
Т.е. если клик на 'Номер 1", то показывать "Номер 1-1" и "Номер 1-2", если они были спрятаны, либо прятать, если были видны.
Пункт "Номер 2" при этом остается неизменным

Добавлено через 2 минуты
Я это делал раньше, причем не единожды. Там не нужно перебирать деток, - все управляется в самом li.
Но как - забыл и не могу найти

Добавлено через 58 секунд
Что-типа Collapse и Expand

Добавлено через 57 минут
Разобрался. Все оказалось предельно просто:

JavaScript
1
2
3
4
   function clicktree(event) {
    var ul = event.target.querySelector("ul");
    if (ul != null)  ul.hidden = !ul.hidden;
   }

@amr-now · 12.07.2021, 07:18

MsGuns, идея очень хорошая.
Уточню реализацию.
Непосредственно внутри <li> отсутствуют вложенные <ul>
В данном случае они могут быть следующим элементом после кликнутого <li> или отсутствовать:

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <ul>
        <li>Номер 1</li>
        <ul>
            <li>Номер 1-1</li>
            <li>Номер 1-2</li>
        </ul>
        <li>Номер 2</li>
        <ul>
            <li>Номер 2-1</li>
            <li>Номер 2-2</li>
        </ul>
    </ul>
    <script>
        let ul = document.querySelector("ul"); // Общий контейнер
        ul.onclick = clicktree;
 
        function clicktree(event) {
            var ul = event.target.nextElementSibling;
            if (ul && ul.tagName === "UL") ul.hidden = !ul.hidden;
        }
    </script>
</body>
</html>

@MsGuns · 12.07.2021, 12:11 **[ТС]**

Сообщение от amr-now

Уточню реализацию.

Весьма уместное уточнение, т.к. в приведенном мною выше примере код не работает и пришлось <ul> вкладывать в <li>

HTML5
1
2
3
4
5
6
7
<ul>
   <li> Номер 1
      <ul> 
           <li> Номер 1.1</li>
       </ul>
   </li>
</ul>

Добавлено через 1 минуту
В моем случае список строится динамически js из полученного json, поэтому ul оказывается внутри li

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .

Показать/скрыть содержимое списка/подсписка

Решение

Решение

@MsGuns 1497 / 1238 / 245 Регистрация: 04.04.2011 Сообщений: 4,363

	Показать/скрыть содержимое списка/подсписка 11.07.2021, 21:19. Показов 4046. Ответов 4 Метки javascript (Все метки) Здравствуйте ! Как показать или скрыть всех дочек элемента списка li ? Спасибо за помощь и советы Добавлено через 47 секунд Пожалуйста, без JQuery 0