引导程序 4 |展开时折叠其他部分 [英] Bootstrap 4 | Collapse other sections when one is expanded

查看：20
本文介绍了引导程序 4 |展开时折叠其他部分的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在研究 bootstrap 4 Collapse.想要在展开时折叠其他部分

到目前为止我所做的是:

HTML

<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">内容一</a><button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">内容二</p><div class="collapse" id="collapseExample"><div class="card card-body">内容一在这里

<div class="collapse" id="collapseExample2"><div class="card card-body">内容2在这里

现场演示:现场演示

解决方案

利用data-parent属性:

<p><a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">内容一</a><button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">内容二</p><div class="collapse" id="collapseExample" data-parent="#myGroup"><div class="card card-body">内容1在这里

<div class="collapse" id="collapseExample2" data-parent="#myGroup"><div class="card card-body">内容2在这里

我将 id 添加到您的容器，并将 data-parent 添加到您的内容部分，通过 id 引用此容器.

I am working on bootstrap 4 Collapse. Wanted to collapse other sections when one is expanded

So far i did is :

HTML

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    content 1
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
    Content 2
  </button>
</p>

<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Content one here
  </div>
</div>
<div class="collapse" id="collapseExample2">
  <div class="card card-body">
    Content 2 here
  </div>
</div>

Live demo: Live Demo

解决方案

Make use of data-parent attribute:

<div class="container" id="myGroup">
    <p>
        <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
            content 1
        </a>
        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
            Content 2
        </button>
    </p>

    <div class="collapse" id="collapseExample" data-parent="#myGroup">
        <div class="card card-body">
            Content 1 here 
        </div>
    </div>
    <div class="collapse" id="collapseExample2" data-parent="#myGroup">
        <div class="card card-body">
            Content 2 here 
        </div>
    </div>
</div>

I added the id to your container and also added the data-parent to your content sections, referencing this container through the id.

这篇关于引导程序 4 |展开时折叠其他部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆