Показать сообщение отдельно
  #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>
Ответить с цитированием