Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.06.2021, 18:47
Аспирант
Отправить личное сообщение для jabbascript Посмотреть профиль Найти все сообщения от jabbascript
 
Регистрация: 27.11.2017
Сообщений: 45

Линии вложенности для вложенных списков
Здравствуйте!!!

Кто может подсказать как сделать для списков на подобии кода ниже, линии вложенности от родителя к дочерним и от родителя к родителю.

cssul2.jpg

<ul>
    <li class="item" draggable="true" data-id="1">
        <div>item 1</div>
        <ul>
            <li class="item" draggable="true" data-id="5">
                <div>level 2 item 1</div>
                <ul>
                    <li class="item" draggable="true" data-id="8">
                        <div>level 3 item 2</div>
                    </li>
                </ul>
            </li>
            <li class="item" draggable="true" data-id="6">
                <div>level 2 item 1</div>
                <ul>
                    <li class="item" draggable="true" data-id="9">
                        <div style="opacity: 1;">level 3 item 1</div>
                        <ul>
                            <li class="item" draggable="true" data-id="10">
                                <div>level 4 item 1</div>
                            </li>
                            <li class="item" draggable="true" data-id="11">
                                <div>level 4 item 2</div>
                            </li>
                            <li class="item" draggable="true" data-id="7">
                                <div>level 3 item 1</div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="item" draggable="true" data-id="2" style="opacity: 1;">
        <div style="opacity: 1;">item 2</div>
        <ul>
            <li class="item" draggable="true" data-id="12">
                <div>level 2 item 1</div>
            </li>
            <li class="item" draggable="true" data-id="13">
                <div>level 2 item 2</div>
            </li>
        </ul>
    </li>
    <li class="item" draggable="true" data-id="3">
        <div>item 3</div>
        <ul>
            <li class="item" draggable="true" data-id="14">
                <div>level 2 item 1 level 2 item 1 level 2 item 1 level 2 item 1 level 2 item 1 level 2 item 1 level 2 item 1 level 2 item 1 level 2 item 1</div>
            </li>
            <li class="item" draggable="true" data-id="15">
                <div>level 2 item 2</div>
            </li>
        </ul>
    </li>
    <li class="item" draggable="true" data-id="4">
        <div>item 4</div>
    </li>
</ul>
Ответить с цитированием
  #2 (permalink)  
Старый 05.06.2021, 18:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

jabbascript,
https://javascript.ru/ui/tree

https://www.jstree.com/demo/
Ответить с цитированием
  #3 (permalink)  
Старый 05.06.2021, 19:18
Аспирант
Отправить личное сообщение для jabbascript Посмотреть профиль Найти все сообщения от jabbascript
 
Регистрация: 27.11.2017
Сообщений: 45

рони,
Спасибо! похоже на то что надо.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Решение проблемы кодировок для AJAX и PHP без iconv (cp1251 в AJAX) Serge Ageyev AJAX и COMET 10 24.04.2013 20:48
Новая система управления сайтом Scripto CMS deepslam Ваши сайты и скрипты 38 31.01.2011 14:55
Модуль для работы с модулями JSprog Ваши сайты и скрипты 29 02.09.2009 13:31
Нужен тулкит для сортировки списков cj_spotty Элементы интерфейса 7 31.07.2009 09:27