《bootstrap树形列表;bootstrap树形选择》

一、解决方案简述

在网页开发中，为了以结构化的方式展示具有层级关系的数据，如文件夹结构、组织架构等，可以使用基于Bootstrap的树形列表和树形选择组件。借助这些组件，用户能够方便地查看数据的层级关系，并且对于树形选择来说，还能让用户选择特定的节点。

二、利用纯CSS与JavaScript构建

（一）HTML结构

html</p>

<div id="tree">
    <ul>
        <li>
            <span>父节点1</span>
            <ul>
                <li><span>子节点1 - 1</span></li>
                <li><span>子节点1 - 2</span></li>
            </ul>
        </li>
        <li>
            <span>父节点2</span>
            <ul>
                <li><span>子节点2 - 1</span></li>
            </ul>
        </li>
    </ul>
</div>

<p>

（二）CSS样式（基于Bootstrap）

css
/* 引入Bootstrap */
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css');</p>

<h1>tree ul {</h1>

<pre><code>list - style - type: none;
margin: 0;
padding: 0;

}

tree li {

margin: 0;
padding: 10px;
position: relative;

}

tree span {

cursor: pointer;

}

tree ul ul {

display: none;

}

tree li.open > ul {

display: block;

}

（三）JavaScript代码

javascript
var treeElements = document.querySelectorAll('#tree span');
for (var i = 0; i < treeElements.length; i++) {
treeElements[i].addEventListener('click', function () {
var parentLi = this.parentElement;
parentLi.classList.toggle('open');
});
}


三、使用第三方库实现

（一）引入jQuery与jqTree插件

需要引入jQuery库和jqTree插件的相关文件。
```html

</p>

<h3>（二）HTML结构</h3>

<p>```html</p>

<div id="tree1"></div>

<p>

（三）JavaScript代码

javascript
$(function() {
    var data = [
        {
            label: '父节点1',
            children: [
                { label: '子节点1 - 1' },
                { label: '子节点1 - 2' }
            ]
        },
        {
            label: '父节点2',
            children: [
                { label: '子节点2 - 1' }
            ]
        }
    ];</p>

<pre><code>$('#tree1').tree({
    data: data
});

});

如果要实现树形选择功能，在上述基础上，对于使用jqTree的情况，可以通过监听节点选中事件来获取选中的节点信息并进行相应的操作。而对于纯CSS与JavaScript构建的方式，则可以在点击节点时为节点添加选中标识（例如通过添加一个特殊的类），并且记录下被选中的节点信息。