《bootstrap树形菜单_bootstrap树形选择》

解决方案简述

在Web开发中，构建树形菜单或树形选择组件是提升用户体验的有效方式之一。使用Bootstrap框架结合其他前端技术可以方便地实现这一功能。通过利用Bootstrap的样式和布局能力，再借助JavaScript（如jQuery）或者专门的插件（例如zTree、jsTree等），能够创建出美观且交互性强的树形菜单或树形选择结构。

基于Bootstrap + jQuery+自定义HTML实现

HTML代码

html</p>

<div id="treeMenu">
    <ul class="list-unstyled">
        <li>
            <span class="caret">根节点1</span>
            <ul class="nested list-unstyled">
                <li>子节点1-1</li>
                <li>子节点1-2</li>
            </ul>
        </li>
        <li>
            <span class="caret">根节点2</span>
            <ul class="nested list-unstyled">
                <li>子节点2 - 1</li>
            </ul>
        </li>
    </ul>
</div>

<p>

CSS代码（可选）

这里主要是为了配合Bootstrap已有的样式做一些简单的调整。
css .caret { cursor: pointer; }

JavaScript代码（使用jQuery）

javascript $(document).ready(function(){ $('.caret').click(function(){ $(this).next('ul').slideToggle(); $(this).toggleClass('caret-down'); }); });
这个简单的示例中，我们通过给父级元素添加caret类来标识它可以展开或折叠子元素，点击时切换显示状态，并且改变图标样式以提示用户当前的状态。

使用Bootstrap TreeView插件

如果项目允许使用插件，那么Bootstrap TreeView是一个不错的选择。

需要引入插件相关的文件：
```html

```

然后可以通过以下代码初始化一个树形菜单：

```javascript
var treeData = [
{
text: "根节点1",
nodes: [
{
text: "子节点1-1"
},
{
text: "子节点1-2"
}
]
},
{
text: "根节点2",
nodes: [
{
text: "子节点2 - 1"
}
]
}
];