Spring Boot + Thymeleaf каждый + если

Question

из Backend Java, у меня есть такая карта:Карта allMenusЭта карта уже содержала эти объекты:1. все меню2. ПодменюИх детали:

{subMenu=[MenuItem [id=3, itemCaption=sub menu 1-1, itemUrl=http://www.google.com.tw, itemParentId=1, itemOrder=1], MenuItem [id=4, itemCaption=sub menu 1-2, itemUrl=http://tw.yahoo.com, itemParentId=1, itemOrder=2], MenuItem [id=5, itemCaption=sub menu 2-1, itemUrl=http://tw.msn.com, itemParentId=2, itemOrder=1], MenuItem [id=6, itemCaption=sub menu 2-2, itemUrl=https://www.hosting24.com/, itemParentId=2, itemOrder=2], MenuItem [id=7, itemCaption=sub menu 2-3, itemUrl=http://u.camdemy.com/, itemParentId=2, itemOrder=3]], rootMenu=[MenuItem [id=1, itemCaption=top menu 1, itemUrl=null, itemParentId=0, itemOrder=1], MenuItem [id=2, itemCaption=top menu 2, itemUrl=null, itemParentId=0, itemOrder=2]]}

Теперь в Front-end HTML:Я использую следующие коды для формирования боковой панели,который содержит главное меню и подменю, всего уровней = 2, но не удалось.Пожалуйста, прочитайте мои коды:

<nav id="sidebar">
    <div style="height: 100px;"></div>
    <div th:each="rootMenu:${allMenus.rootMenu}">
            <button type="button" id="btn-sidebar" class="btn btn-warning"
                data-toggle="collapse" data-target="#menu1sub1"
                th:text="${rootMenu.itemCaption}"></button>
                <div class="collapse" id="menu1sub1">
                    <ul th:each="subMenu:${allMenus.subMenu}">
                        <li class="nav-item" th:if="${subMenu.itemParentId == rootMenu.id}">
                            <a th:href="${subMenu.itemUrl}" th:text="${subMenu.itemCaption}"
                            ></a>
                        </li>
                    </ul>
                </div>
    </div>
</nav>

Результатом вышеприведенных кодов являются:1. Все верхние меню отображаются правильно.2. Однако все подменю помещаются в первое верхнее меню, что неправильно. введите описание изображения здесь