Вложенное меню Navbar не работает в Bootstrap - PullRequest
0 голосов
/ 15 января 2019

Хорошо! Я не использую Primefaces / Omnifaces или Bootfaces , требуется только использование Bootstrap.

То, чего я пытаюсь добиться, - это динамическое создание вложенного меню, мне удалось достичь только одного уровня меню.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">LAS</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">

                <ui:repeat value="#{menuViewModel.parentMenu}" var="parentMenuItem">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            #{parentMenuItem.menuLabel}
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <ui:repeat value="#{menuViewModel.generateChildMenu(parentMenuItem.menuName)}" var="childMenuItem">
                                <a class="dropdown-item" href="#">#{childMenuItem.menuLabel}</a>
                            </ui:repeat>
                        </div>
                    </li>
                </ui:repeat>
            </ul>
            <button class="btn btn-outline-success my-2 my-sm-0 dropdown">
                <span class="glyphicon glyphicon-user"></span> User
            </button>
        </div>
    </nav>

Теперь, когда может быть много детей (хотя у нас есть только 3 уровня вложенных пунктов меню), проблема начинается. Как мне изменить мой xhtml для создания вложенных меню.

Прикрепленное изображение показывает первый уровень меню.

enter image description here

Как вы можете видеть, пункт меню Конфигурация хоста имеет другие подпункты, но я не могу понять, как я могу показать его на моем виде.

Должен ли я использовать рекурсивную логику или что-то в этом роде, или необходимо написать какой-нибудь EL?

Спасибо

...