时间戳

首页 > 解决方案 > 无法使两个手风琴按钮显示各自的内容

html - 无法使两个手风琴按钮显示各自的内容

问题描述

我需要两个选项卡能够独立显示它们各自的内容（目前，必须显示第一个选项卡才能让第二个选项卡显示其内容。我怎样才能让这两个按钮独立于另一个显示它们各自的内容?

<div id="Exams">
  <div class="jumbotron">
    <div class="Exams">
      <div class="card">
        <div class="row text-center">
  <div class="col-md-6"> 
    <button type="button" class="btn" data-toggle="collapse" data-target="#exam_schedule" style="width:100%;">Exam Schedule</button>
  </div>
  <div class="col-md-6">
    <button type="button" class="btn" data-toggle="collapse" data-target="#practise_exams" style="width:100%;">Practise Exams</button>
  </div>
</div>

<div id="exam_schedule" class="collapse">
  <!-- exam schedule content -->
</div>

<div id="practise_exams" class="collapse">
  <!-- practise exams content -->
</div>

标签： htmlcss

解决方案

您可以尝试以下带有按钮的手风琴示例代码

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    
    
    <p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>
    
  </body>
</html>

推荐阅读