bootstrap 的 collapse 使用示例

bootstrap 的 collapse 使用示例


1. View 

<a data-toggle="collapse" href="#searchContainer" aria-expanded="false" aria-controls="searchContainer">
        Advanced Search<span class="glyphicon glyphicon-chevron-down" id="searchCollapseIcon" style="margin-left:20px"></span>
    </a>


<div class="collapse" id="searchContainer">
....
</div>

2. 使用js完成icon的同步

$('#searchContainer').on('shown.bs.collapse', function () {
                    $("#searchCollapseIcon").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
                });
                $('#searchContainer').on('hidden.bs.collapse', function () {
                    $("#searchCollapseIcon").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
                });

这里还有几个例子：


http://jsfiddle.net/zessx/R6EAW/12/
http://www.bootply.com/89084