HTML CSS JAVASCRIPT JQUERY AI PHP SQL EXCEL LINUX C# C++ C PYTHON JAVA 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ

如何在 Bootstrap 中通过 URL 扩展手风琴折叠面板?

htmlbootstrapfront end technology更新于 2024/11/25 1:16:17

Bootstrap 是一个流行的开源框架，用于构建响应式和移动优先的网站。通过提供一系列预制设计元素和布局组件，该框架使开发人员能够轻松创建标准化且外观专业的网页。表单、按钮、导航和排版只是其中的一部分。

为了实现可扩展的手风琴折叠面板，我们将使用 URL 接口的哈希属性(通常称为 USVString)，该属性包含"#"后跟标识符 URL。

语法

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

<url> 必须是指向的 URL，后跟可折叠属性的 ID，以便使用 Bootstrap 的折叠类控制特定部分的切换。

示例 1

这里我们有两个标识符，分别是 #personalDetials 和 #contactDetails。USVString 绑定到锚标签的 href 属性，该属性指向 div 的 id 属性，以便在点击时切换折叠面板数据的折叠类。

算法

步骤 1:使用 <link> 和 <script> 从 CDN 导入 Bootstrap JS 和 CSS标签。

步骤 2:在锚标签的 href 属性内定义主题标签 URL。

步骤 3:为 div 标签赋予与需要在手风琴中折叠的主题标签 URL 相同的 ID。

步骤 4:在锚标签的 data-bs-toggle 属性中定义需要切换的类，在本例中为"collapse"类。

步骤 5:在脚本标签内添加脚本以切换类。

示例 

<!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>

结论

对于页面较长或包含多个部分的网站，通过 URL 扩展折叠面板非常有用，因为它允许用户直接导航到内容，而无需滚动或搜索。它还能提升网站的可访问性，尤其是对于那些难以导航到特定内容的视障用户而言。

要使用此功能，需要编写一个专门的脚本来分析 URL 并扩展相关的折叠面板元素。这可以通过使用 JavaScript 和 jQuery 来实现，它们可以识别 URL 参数并根据需要调整折叠面板。

有用资源

打印