Bootstrap 如何通过URL展开手风琴

Bootstrap是一个流行的开源框架，用于构建响应式和移动优先的网站。通过提供一系列预制的设计元素和布局组件，这个框架使开发者能够轻松制作出标准化和专业的网页。其中包括表单、按钮、导航和排版等功能。

为了实现可扩展的手风琴效果，我们将使用URL接口中的哈希（hash）属性，通常称为USVString，其中包含以‘#’开头的标识符URL。

语法

<a data-bs-toggle="collapse" href="<url>" role="button" aria-expanded="false" aria-controls="collapseExample">
              ....
  </a>

<url>必须是指定的URL，后面跟着可折叠属性的ID，以使用bootstrap的collapse类来控制特定部分的折叠。

示例1

这里有两个标识符，即#personalDetials和#contactDetails。USVString绑定到锚点标签的href属性上，它指向div标签的id属性，以在单击时切换手风琴数据的折叠类。

步骤

步骤1： 使用<link>和<script>标签从CDN导入bootstrap的JS和CSS。

步骤2： 在锚点标签的href属性中定义哈希URL。

步骤3： 给需要在手风琴中折叠的div标签赋予相同的id。

步骤4： 在锚点标签的data-bs-toggle属性中定义需要切换的类，如果是我们的情况，则是“collapse”类。

步骤5： 添加在script标签中切换类的脚本。

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
    </script>

  <!--Bootstrap CSS CDN-->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">

  <!--Bootstrap JS CDN-->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js"
    integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js"
    integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ"
    crossorigin="anonymous"></script>
</head>

<body>
  <div class="accordion container mt-4" id="accordionExample">
    <div class="accordion-item px-4 py-3">
      <h3 class="accordion-header">
        <a data-bs-toggle="collapse" href="#collapseOne" role="button" aria-expanded="false"
          aria-controls="collapseExample">
          Personal Detials
        </a>
      </h3>
      <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
        <div class="accordion-body">
          <p><strong>Name:</strong> TutorialsPoint</p>
          <p><strong>Motto:</strong> Simply Easy Learning at your fingertips</p>
          <p><strong>About:</strong> Tutorials Point is a leading Ed Tech company striving to provide the best learning
            material on technical and non-technical subjects.</p>
        </div>
      </div>
    </div>
    <div class="accordion-item px-4 py-3">
      <h3 class="accordion-header">
        <a data-bs-toggle="collapse" href="#contactDetails" role="button" aria-expanded="false"
          aria-controls="collapseExample">
          Contact Details
        </a>
      </h3>
      <div id="contactDetails" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
        <div class="accordion-body">
          <p><strong>Website: </strong>www.tutorialspoint.com</p>
          <p><strong>Instagram: </strong>https://www.instagram.com/tutorialspoint_/</p>
          <p><strong>Twitter: </strong>https://twitter.com/tutorialspoint</p>
        </div>
      </div>
    </div>

  </div>
  <script>
    if (location.hash !== null && location.hash !== "") {
      $(location.hash + ".collapse").collapse("show");
    }
  </script>
</body>

</html>

示例 2

在这个示例中，我们有三个标识符，分别是#collapseOne、#CollapseTwo和#collapseThree。当相应的部分被点击时，这些标识符将用于触发手风琴效果。

<!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
            </script>

        <!--Bootstrap CSS CDN-->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
            integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">

        <!--Bootstrap JS CDN-->
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js"
            integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE"
            crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js"
            integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ"
            crossorigin="anonymous"></script>
    </head>

    <body>
        <div class="accordion" id="myAccordion">
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingOne">
                    <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse"
                        data-bs-target="#collapseOne">1. What is HTML?</button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
                    <div class="card-body">
                        <p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing
                            the structure of web pages. <a href="https://www.tutorialrepublic.com/html-tutorial/"
                                target="_blank">Learn more.</a></p>
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingTwo">
                    <button type="button" class="accordion-button" data-bs-toggle="collapse"
                        data-bs-target="#collapseTwo">2. What is Bootstrap?</button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse show" data-bs-parent="#myAccordion">
                    <div class="card-body">
                        <p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web
                            development. It is a collection of CSS and HTML conventions. <a
                                href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn
                                more.</a></p>
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingThree">
                    <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse"
                        data-bs-target="#collapseThree">3. What is CSS?</button>
                </h2>
                <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
                    <div class="card-body">
                        <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a
                            given HTML element such as colors, backgrounds, fonts etc. <a
                                href="https://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
                    </div>
                </div>
            </div>
        </div>
        <script>
            if (location.hash !== null && location.hash !== "") {
                $(location.hash + ".collapse").collapse("show");
            }
        </script>
    </body>
    </html>