如何使用bootstrap和thymeleaf或Javascript实现嵌套的展开和收拢优化

当我单击父展开组件时，子组件正在加载可展开组件列表。当我单击子组件时，父组件和子组件正在折叠。给我一些提示。它的树结构类似于父级是国家-->州-->规定-->强制命令

条款
：

                                    <li data-toggle="collapse"
                                        data-parent="#accordion"
                                        aria-expanded="false"
                                        aria-controls="Provisions"
                                        th:each="ProvisionsName,indexObj :${ProvisionsNames}"
                                        th:attr="data-target='#Provisions'+${indexObj.index}"><span
                                        data-feather="plus-circle"></span> <span
                                        th:text="${ProvisionsName}"> </span>


                                        <div class="collapse in" 
                                            th:attr="id='Provisions'+${indexObj.index}">
                                            <div >
                                            <ul style="list-style-type: none;">
                                                <li th:each="ProvisionsList : ${ProvisionsMap.get(ProvisionsName)}">
                                                    <span th:text="${ProvisionsList}"> </span><br> <label><strong>Provisions
                                                            :</strong> </label><span th:text="${ProvisionsName}"> </span>
                                                    <div id="accordion-sub">
                                                    <ul style="list-style-type: none;">

                                                        <li data-toggle="collapse" 
                                                            aria-expanded="false" data-parent="#accordion-sub"
                                                            aria-controls="Mandals"
                                                            th:each="MandalsName,indexObjs :${ProvisionsMandalsMap.get(ProvisionsName)}"
                                                            th:attr="data-target='#Mandals'+${indexObjs.index}">
                                                            <span data-feather="plus-circle"></span> <span
                                                            th:text="${MandalsName}"></span>

                                                            <div class="collapse in" 
                                                                th:attr="id='Mandals'+${indexObjs.index}">
                                                                <ul style="list-style-type: none;">
                                                                    <li th:each="MandalsList : ${MandalsMap.get(MandalsName)}">
                                                                        <span th:text="${MandalsList}"> </span>
                                                                        </li>
                                                                </ul>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                    </div>
                                                </li>
                                            </ul>
                                            </div>
                                        </div></li>
                                </ul>
                            </div>