Bootstrap折叠菜单

• 可使用<a></a>标签或<button></button>进行控制
• 需要折叠的内容放在.collapse里，为其创建.card类，内容放里面
• 使用href或data-target控制链接位置
• 必须设置data-toggle="collapse"进行切换效果的实现
  练习：

        <a class="btn btn-primary" href="#one" data-toggle="collapse">
            按钮1
        </a>
        <button class="btn btn-primary" href="#one" data-toggle="collapse">
            按钮2
        </button>
        <div class="collapse" id="one">
            <div class="card card-body">
                这是一个内容主体，点击按钮时出现
            </div>
        </div>

多内容切换：

• 给每个内容块设置id
• 给内容设置.multi-collapse类属性
• 给按钮设置data-target=".multi-collapse"属性
  练习：

        <p>
            <a class="btn btn-info" data-toggle="collapse" href="#left" role="button" aria-expanded="false" aria-controls="left">按钮左</a>
            <button class="btn btn-info" type="button" data-toggle="collapse" data-target="#right" aria-expanded="false" aria-controls="right">按钮右</button>
            <button class="btn btn-info" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multi-collapse">按钮全部</button>
        </p>
        <div class="row">
            <div class="col">
                <div class="collapse multi-collapse" id="left">
                    <div class="card card-body">
                        这是左边的文字
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="collapse multi-collapse" id="right">
                    <div class="card card-body">
                        这是右边的文字
                    </div>
                </div>
            </div>
        </div>

手风琴样式：

• 第一个内容块设置.show类属性进行显示
• 其他内容块设置data-parent="#accordionExample"属性，只能显示一个面板内容
  练习:

        <div class="accordion" id="accordionExample">
            <div class="card">
                <div class="card-header" id="headingOne">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                         列表一
                        </button>
                    </h2>
                </div>
                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                    <div class="card-body">
                        11111111111
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header" id="headingTwo">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        列表二
                        </button>
                    </h2>
                </div>
                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                    <div class="card-body">
                        222222222222
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header" id="headingThree">
                    <h2 class="mb-0">
                        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        列表三
                        </button>
                    </h2>
                </div>
                <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                    <div class="card-body">
                        3333333333333
                    </div>
                </div>
            </div>
        </div>