树状菜单（利用映射-bootstrap+jQuery实现折叠功能）

以下是一个使用Bootstrap和jQuery实现的简单树状菜单的代码示例：

HTML:

<div class="container">
    <ul class="nav nav-pills nav-stacked tree" style="width: 200px;">
        <li data-toggle="collapse" data-target="#item1" class="expandable">
            Item 1 <i class="pull-right fa fa-caret-down"></i>
        </li>
        <ul id="item1" class="collapse">
            <li>Subitem 1.1</li>
            <li>Subitem 1.2</li>
            <li>Subitem 1.3</li>
        </ul>
        <li data-toggle="collapse" data-target="#item2" class="expandable">
            Item 2 <i class="pull-right fa fa-caret-down"></i>
        </li>
        <ul id="item2" class="collapse">
            <li>Subitem 2.1</li>
            <li>Subitem 2.2</li>
        </ul>
        <!-- More list items as needed -->
    </ul>
</div>

CSS:

.tree li {
    cursor: pointer;
    list-style-type: none;
}
 
.tree i {
    float: right;
    margin-right: -15px;
}

jQuery:

$(document).ready(function(){
    $('.expandable').click(function(){
        $(this).find('i').toggleClass('fa-caret-right fa-caret-down');
    });
});

确保在你的HTML文件中引入了Bootstrap的CSS和jQuery库，以及Font Awesome图标库（用于提供箭头图标）。

这个代码实例提供了一个简单的树状菜单，每个可折叠项都有一个小箭头，点击时可以切换箭头的方向，表示菜单项现在是折叠还是展开。使用data-toggle="collapse"和data-target属性与Bootstrap的折叠组件结合，可以轻松实现菜单的折叠功能。