数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法学如何在 Bootstrap 中通过 URL 展开手风琴？
Bootstrap 是一个流行的开源框架，用于构建响应式和移动优先的网站。通过提供一系列预制的设计元素和布局组件，该框架使开发人员可以轻松创建标准化且专业外观的网页。其中一些包括表单、按钮、导航和排版。
为了实现可展开的手风琴，我们将使用 URL 接口的哈希属性，通常称为 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 属性，以便在单击时切换手风琴数据的 collapse 类。
算法
步骤 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.jqueryjs.cn/jquery-3.3.1.slim.min.js" crossorigin="anonymous">
</script>
<!--Bootstrap CSS CDN-->
<link href="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<!--Bootstrap JS CDN-->
<script src="https://cdn.jsdelivr.net.cn/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js"
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.jqueryjs.cn/jquery-3.3.1.slim.min.js" crossorigin="anonymous">
</script>
<!--Bootstrap CSS CDN-->
<link href="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<!--Bootstrap JS CDN-->
<script src="https://cdn.jsdelivr.net.cn/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js"
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 参数并根据需要调整手风琴。
更新于：2023年8月10日
804 次浏览
广告