Bootstrap完成折叠效果（手风琴）

最新推荐文章于 2024-09-02 18:03:19 发布

前端小易

最新推荐文章于 2024-09-02 18:03:19 发布

阅读量2.9k

点赞数

分类专栏： Bootstrap 文章标签： Bootstrap 手风琴

本文链接：https://blog.csdn.net/ycl396232695/article/details/78294863

版权

Bootstrap 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

老样子，Bootstrap要完成手风琴效果---首先要引用相应的collapse.js，或者直接如下：

<script src="js/jquery-1.11.3.js" rel="stylesheet"></script>
<script src="js/bootstrap.min.js" rel="stylesheet"></script>

也一样的不用再写什么JS了，直接如下：

<div class="container">
    <h3>组件----折叠效果collapse(可以做手风琴)</h3>
    <a href="#collapse1" class="btn btn-info" data-toggle="collapse"> link触发折叠效果</a>
    <button type="button" class="btn btn-success" data-target="#collapse2" data-toggle="collapse">
        Btn触发折叠效果</button>
    <!--如果要默认不展开就要在-->
    <div id="collapse1" class="collapse">
        <div class="alert alert-success">
            Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
        </div>
    </div>
    <div id="collapse2" class="collapse">
        <div class="alert alert-danger">
            Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem
        </div>
    </div>
    
</div>