带有 Bootstrap 嵌套折叠的 XML 编辑器

问：

我的任务是创建一个预定义 XML 的编辑器，其中所有父标签和子标签都是已知的。我正在尝试借助引导嵌套折叠功能来解决这个问题。

在附加的代码中，我只能在层次结构中的最后一个子元素上具有值，因为所有父项都指向子元素。请帮我处理父级也有自己的价值的情况。所以现在这两件事都应该起作用，当我单击父项时，我可以捕获它自己的值，并且它会像 XML 一样打开子结构。

                                <a href="#item-1" class="list-group-item" data-toggle="collapse">
                                    <i class="glyphicon glyphicon-chevron-right"></i>Item 1
                                </a>
                                <div class="list-group collapse" id="item-1">

                                    <a href="#item-1-1" class="list-group-item" data-toggle="collapse">
                                        <i class="glyphicon glyphicon-chevron-right"></i>Item 1.1
                                    </a>
                                    <div class="list-group collapse" id="item-1-1">
                                        <a href="#" class="list-group-item">Item 1.1.1</a>
                                        <a href="#" class="list-group-item">Item 1.1.2</a>
                                        <a href="#" class="list-group-item">Item 1.1.3</a>
                                    </div>

                                    <a href="#item-1-2" class="list-group-item" data-toggle="collapse">
                                        <i class="glyphicon glyphicon-chevron-right"></i>Item 1.2
                                    </a>
                                    <div class="list-group collapse" id="item-1-2">
                                        <a href="#" class="list-group-item">Item 1.2.1</a>
                                        <a href="#" class="list-group-item">Item 1.2.2</a>
                                        <a href="#" class="list-group-item">Item 1.2.3</a>
                                    </div>

                                    <a href="#item-1-3" class="list-group-item" data-toggle="collapse">
                                        <i class="glyphicon glyphicon-chevron-right"></i>Item 1.3
                                    </a>
                                    <div class="list-group collapse" id="item-1-3">
                                        <a href="#" class="list-group-item">Item 1.3.1</a>
                                        <a href="#" class="list-group-item">Item 1.3.2</a>
                                        <a href="#" class="list-group-item">Item 1.3.3</a>
                                    </div>

                                </div>

                                <a href="#item-2" class="list-group-item" data-toggle="collapse">
                                    <i class="glyphicon glyphicon-chevron-right"></i>Item 2
                                </a>
                                <div class="list-group collapse" id="item-2">

                                    <a href="#item-2-1" class="list-group-item" data-toggle="collapse">
                                        <i class="glyphicon glyphicon-chevron-right"></i>Item 2.1
                                    </a>
                                    <div class="list-group collapse" id="item-2-1">
                                        <a href="#" class="list-group-item">Item 2.1.1</a>
                                        <a href="#" class="list-group-item">Item 2.1.2</a>
                                        <a href="#" class="list-group-item">Item 2.1.3</a>
                                    </div>

                                    <a href="#item-2-2" class="list-group-item" data-toggle="collapse">
                                        <i class="glyphicon glyphicon-chevron-right"></i>Item 2.2
                                    </a>
                                    <div class="list-group collapse" id="item-2-2">
                                        <a href="#" class="list-group-item">Item 2.2.1</a>
                                        <a href="#" class="list-group-item">Item 2.2.2</a>
                                        <a href="#" class="list-group-item">Item 2.2.3</a>
                                    </div>

                                    <a href="#item-2-3" class="list-group-item" data-toggle="collapse">
                                        <i class="glyphicon glyphicon-chevron-right"></i>Item 2.3
                                    </a>
                                    <div class="list-group collapse" id="item-2-3">
                                        <a href="#" class="list-group-item">Item 2.3.1</a>
                                        <a href="#" class="list-group-item">Item 2.3.2</a>
                                        <a href="#" class="list-group-item">Item 2.3.3</a>
                                    </div>

                                </div>


                                <a href="#item-3" class="list-group-item" data-toggle="collapse">
                                    <i class="glyphicon glyphicon-chevron-right"></i>Item 3
                                </a>
                                <div class="list-group collapse" id="item-3">

                                    <a href="#item-3-1" class="list-group-item" data-toggle="collapse">
                                        <i class="glyphicon glyphicon-chevron-right"></i>Item 3.1
                                    </a>
                                    <div class="list-group collapse" id="item-3-1">
                                        <a href="#" class="list-group-item">Item 3.1.1</a>
                                        <a href="#" class="list-group-item">Item 3.1.2</a>
                                        <a href="#" class="list-group-item">Item 3.1.3</a>
                                    </div>

                                    <a href="#item-3-2" class="list-group-item" data-toggle="collapse">
                                        <i class="glyphicon glyphicon-chevron-right"></i>Item 3.2
                                    </a>
                                    <div class="list-group collapse" id="item-3-2">
                                        <a href="#" class="list-group-item">Item 3.2.1</a>
                                        <a href="#" class="list-group-item">Item 3.2.2</a>
                                        <a href="#" class="list-group-item">Item 3.2.3</a>
                                    </div>

                                    <a href="#item-3-3" class="list-group-item" data-toggle="collapse">
                                        <i class="glyphicon glyphicon-chevron-right"></i>Item 3.3
                                    </a>
                                    <div class="list-group collapse" id="item-3-3">
                                        <a href="#detailsDiv1" class="list-group-item">Item 3.3.1</a>
                                        <a href="#detailsDiv2" class="list-group-item">Item 3.3.2</a>
                                        <a href="#detailsDiv3" class="list-group-item">Item 3.3.3</a>
                                    </div>

                                </div>

                            </div>
                        </div>