@strelkovandreyv

Как сделать древовидный HTML список?

Добрый день. У меня на странице имеется древовидный HTML список

<ul>
  <li><a href="coffee">Coffee</a></li>
  <li><a href="tea">Tea</a>
    <ul>
      <li><a href="black-tea">Black tea</a>
    	<ul>
      	  <li><a href="warn-tea" class="active">Warm tea</a></li>
    	</ul>      
      </li>
      <li><a href="green-tea">Green tea</a></li>
      <li><a href="yellow-tea">Yellow tea</a></li>      
    </ul>
  </li>
  <li><a href="milk">Milk</a></li>
</ul>


Хочу сделать так чтобы, изначально он был схлопнутый, т.е.
  • Coffee
  • Tea
  • Milk

Но слева от каждого пункта была иконка, обозначающая что есть дочерние элементы, кликая по которой, пункт разворачивался, и появлялись дочерние, например таковым будет пункт Tea, кликнув слева от него по иконки появились бы Black, green, yellow tea
Но при этом сам пункт Tea это ссылка, если кликнуть по нему, то страница перезагрузится и ему добавится класс active, в данном случае он должен сам быть уже распахнутым, и такое поведение должно быть на любом уровне иерархии, т.е. все родительские элементы начиная от active должны быть автоматом распахнутыми. Но при этом с помощью иконок слева, должны быть возможность их схлапывания

Другими словами какая есть может готовая библиотека, которая я бы подсунул class меню, либо некий идентификатор корня меню, после чего она бы сделала все данные изменения. Либо это можно решить лишь с помощью CSS
Важен факт возможности распахивать и сворачивать кликая слева от ссылки по чему нибудь, и если я отдельно по ссылке перейду в какой нибудь дочерний элемент то все его родительские элементы автоматически распахнутся (до самого начала) и если есть дочерние элементы у элемента на который я перёшёл, то они тоже распахнутся на один уровень так сказать
  • Вопрос задан
  • 836 просмотров
Пригласить эксперта
Ответы на вопрос 3
irishmann
@irishmann
Научись пользоваться дебаггером
Вот тут --->Раскрывающийся многоуровневый список <--- расписано как с помощью JQuery плагина Treeview это сделать, можете пропустить часть про PHP.
UPD. Вот еще пара примеров: ссылка_1, ссылка_2
Ответ написан
Комментировать
@strelkovandreyv Автор вопроса
Спасибо всем, нашёл именно то что хотел таки
https://www.jqueryscript.net/menu/Lightweight-Fold...
Ответ написан
Комментировать
amurcoder
@amurcoder
Web Developer
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы