Почему в вёрстке при выводе дерева разделов появляется div?

Question

[RecentForce99]

Всем привет! Делаю вывод разделов, у которых может быть бесконечная вложенность и вывожу через функцию, но почему-то появляется div, который ломает всю вёрстку.

Массив с разделами:

spoiler

Array
    (
    [11] => Array
        (
            [IBLOCK_ID] => 1
            [ID] => 11
            [NAME] => Цилиндро-поршневая группа
            [DEPTH_LEVEL] => 2
            [IBLOCK_SECTION_ID] => 1
            [CHILD] => Array
                (
                    [29] => Array
                        (
                            [IBLOCK_ID] => 1
                            [ID] => 29
                            [NAME] => Втулки (Полуфабрикат)
                            [DEPTH_LEVEL] => 3
                            [IBLOCK_SECTION_ID] => 11
                        )

                    [30] => Array
                        (
                            [IBLOCK_ID] => 1
                            [ID] => 30
                            [NAME] => Кольца поршневые
                            [DEPTH_LEVEL] => 3
                            [IBLOCK_SECTION_ID] => 11
                        )

                    [31] => Array
                        (
                            [IBLOCK_ID] => 1
                            [ID] => 31
                            [NAME] => Комплекты ЦПГ
                            [DEPTH_LEVEL] => 3
                            [IBLOCK_SECTION_ID] => 11
                        )

                    [33] => Array
                        (
                            [IBLOCK_ID] => 1
                            [ID] => 33
                            [NAME] => Палец поршневой
                            [DEPTH_LEVEL] => 3
                            [IBLOCK_SECTION_ID] => 11
                        )

                    [32] => Array
                        (
                            [IBLOCK_ID] => 1
                            [ID] => 32
                            [NAME] => Поршень
                            [DEPTH_LEVEL] => 3
                            [IBLOCK_SECTION_ID] => 11
                        )

                    [28] => Array
                        (
                            [IBLOCK_ID] => 1
                            [ID] => 28
                            [NAME] => Цильза
                            [DEPTH_LEVEL] => 3
                            [IBLOCK_SECTION_ID] => 11
                        )

                )

        )

    [12] => Array
        (
            [IBLOCK_ID] => 1
            [ID] => 12
            [NAME] => Система охлаждения
            [DEPTH_LEVEL] => 2
            [IBLOCK_SECTION_ID] => 1
            [CHILD] => Array
                (
                    [36] => Array
                        (
                            [IBLOCK_ID] => 1
                            [ID] => 36
                            [NAME] => Термостат
                            [DEPTH_LEVEL] => 3
                            [IBLOCK_SECTION_ID] => 12
                        )

                    [35] => Array
                        (
                            [IBLOCK_ID] => 1
                            [ID] => 35
                            [NAME] => Привод вентилятора
                            [DEPTH_LEVEL] => 3
                            [IBLOCK_SECTION_ID] => 12
                        )

                    [34] => Array
                        (
                            [IBLOCK_ID] => 1
                            [ID] => 34
                            [NAME] => Насос водяной
                            [DEPTH_LEVEL] => 3
                            [IBLOCK_SECTION_ID] => 12
                        )

                )

        )

    [13] => Array
        (
            [IBLOCK_ID] => 1
            [ID] => 13
            [NAME] => Система впуска
            [DEPTH_LEVEL] => 2
            [IBLOCK_SECTION_ID] => 1
            [CHILD] => Array
                (
                    [37] => Array
                        (
                            [IBLOCK_ID] => 1
                            [ID] => 37
                            [NAME] => Турбокомпрессор
                            [DEPTH_LEVEL] => 3
                            [IBLOCK_SECTION_ID] => 13
                        )

                )

        )

    [10] => Array
        (
            [IBLOCK_ID] => 1
            [ID] => 10
            [NAME] => Кривошипно-шатунный механизм
            [DEPTH_LEVEL] => 2
            [IBLOCK_SECTION_ID] => 1
            [CHILD] => Array
                (
                    [25] => Array
                        (
                            [IBLOCK_ID] => 1
                            [ID] => 25
                            [NAME] => Втулки
                            [DEPTH_LEVEL] => 3
                            [IBLOCK_SECTION_ID] => 10
                        )

                    [26] => Array
                        (
                            [IBLOCK_ID] => 1
                            [ID] => 26
                            [NAME] => Заглушка
                            [DEPTH_LEVEL] => 3
                            [IBLOCK_SECTION_ID] => 10
                        )

                    [24] => Array
                        (
                            [IBLOCK_ID] => 1
                            [ID] => 24
                            [NAME] => Клапаны
                            [DEPTH_LEVEL] => 3
                            [IBLOCK_SECTION_ID] => 10
                        )

                    [27] => Array
                        (
                            [IBLOCK_ID] => 1
                            [ID] => 27
                            [NAME] => Вкладыщи/Полукольца
                            [DEPTH_LEVEL] => 3
                            [IBLOCK_SECTION_ID] => 10
                        )

                )

        )

Вёрстка:

<div class="catalog__category-list-wrap">
        <div class="catalog__category-list-box">
            <button type="button" class="catalog__category-close mobile"></button>
            <ul class="catalog__category-list">
                <?=getSectionTree($arResult['HTML']); ?>
            </ul>
        </div>
    </div>

Функция вывода дерева:

function getSectionTree($arr) {

    foreach ($arr as $section) {
        ob_start();
            getSectionTree($section['CHILD']);
        $output = ob_get_clean();
        include 'templates/tree.php';
    }
}

templates/tree.php

<?php if($section['CHILD'] && $section['DEPTH_LEVEL'] > 2): ?>
        <ul class="catalog__category-list">
    <?php endif;?>

    <li class="catalog__category-item">
       <label>
            <input type="radio" name="category" value="">
            <span><?=$section['NAME']?></span>
       </label>
        <?php if($section['CHILD']):?>
            <div class="catalog__category-list-box">
                <button type="button" class="catalog__category-back-link back-link" value="">
                    <svg width="19" height="35" viewBox="0 0 19 35" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M18 1L6.66667 17.5L18 34H12.7798L1 17.5L12.7798 1H18Z" fill="#D62214" stroke="#D62214"/>
                    </svg>
                    <span><?=$section['NAME']?></span>
                </button>
                <?=$output?>
            </div>
        <?php endif;?>
    </li>

    <?php if($section['CHILD'] && $section['DEPTH_LEVEL'] > 2):?>
        </ul>
    <?php endif;?>

Подскажите пожалуйста как можно исправить

Comments

[Sand]

А где код вывода "catalog__category-list-wrap"?

[RecentForce99]

Sand, дополнил вопрос

[scottparker]

так и catalog__category-item лежит не в catalog__category-list-box на первом уровне , это норм? или этот тот же закрывающийся див мешает?

[RecentForce99]

scottparker, Это див мешает, изначально всё правильно выводится, но из-за дива вёрстка и ломается

[Алан Гибизов]

Прячьте длинные портянки под спойлеры!
И не используйте скриншоты кода - это запрещено.

Answer 1

[RecentForce99]

Спасибо Сергей. Честно говоря хз как я сам не догадался, но слова Сергея вызвали у меня мысль.

Вот результат:

<li class="catalog__category-item">
        <label>
            <input type="radio" name="category" value="">
            <span><?=$section['NAME']?></span>
        </label>
        <?php if($section['CHILD']):?>
            <div class="catalog__category-list-box">
                <button type="button" class="catalog__category-back-link back-link" value="">
                    <svg width="19" height="35" viewBox="0 0 19 35" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M18 1L6.66667 17.5L18 34H12.7798L1 17.5L12.7798 1H18Z" fill="#D62214" stroke="#D62214"/>
                    </svg>
                    <span><?=$section['NAME']?></span>
                </button>
                <ul class="catalog__category-list">
                    <?=$output?>
                </ul>
            </div>
        <?php endif;?>
    </li>

Answer 2

[AUser0]

Так это закрывающий </DIV> из вашей-же вёрстки.
Для проверки: в вёрстке допишите </div><!-- див -->, и увидите результат...

Comments

[RecentForce99]

Да, я понял, но, а как это исправить?

[AUser0]

RecentForce99, сейчас ваш вопрос полностью аналогичен вопросу "У меня две руки, две ноги, как это исправить?"
Вы уверены, что это надо исправлять? Или может проблема в чём-то другом, а вы зря боретесь с этим </DIV>?

[RecentForce99]

AUser0, Приложен весь код, как исправить поломку вёрстки?

[Сергей]

RecentForce99, ты LI пихаешь в DIV, а не в UL это нормально?

[AUser0]

RecentForce99, а как именно она "ломается"?
Не, лучше так: куда именно по вашему должны переместится эти закрывающие </DIV> ?

[RecentForce99]

AUser0, По коду всё правильно(то есть так и должно быть на странице), но при этом див в не том месте

[Сергей]

RecentForce99, DIV как раз там где нужно, а вот LI нет! LI должны быть обернуты d UL

[AUser0]

RecentForce99, ну если всё правильно - стало быть и проблема решена, всем спасибо, расходимся!