WEB前端网页设计-Bootstrap5 折叠 & JavaScript 注释

目录

Bootstrap5 折叠

实例解析

JavaScript 注释

JavaScript 注释

JavaScript 多行注释

使用注释来阻止执行

在行末使用注释

---

Bootstrap5 折叠

Bootstrap5 折叠可以很容易的实现内容的显示与隐藏。

<button data-bs-toggle="collapse" data-bs-target="#demo">折叠</button>
 
<div id="demo" class="collapse">
这里是一些测试的内容。。。
</div>

实例解析

.collapse 类用于指定一个折叠元素 (实例中的 <div>); 点击按钮后会在隐藏与显示之间切换。

控制内容的隐藏与显示，需要在 <a> 或 <button> 元素上添加 data-bs-toggle="collapse" 属性。 data-target="#id" 属性是对应折叠的内容 (<div id="demo">)。

注意: <a> 元素上你可以使用 href 属性来代替 data-bs-target 属性:

<a href="#demo" data-bs-toggle="collapse">折叠</a>
 
<div id="demo" class="collapse">
这里是一些测试的内容。。。
</div>

默认情况下折叠的内容是隐藏的，你可以添加 .show 类让内容默认显示:

<div id="demo" class="collapse show">
这里是一些测试的内容。。。
</div>

以下实例通过扩展卡片组件来显示简单的手风琴。

注意: 使用 data-bs-parent 属性来确保所有的折叠元素在指定的父元素下，这样就能实现在一个折叠选项显示时其他选项就隐藏。

<div id="accordion">
    <div class="card">
        <div class="card-header">
            <a class="btn" data-bs-toggle="collapse" href="#collapseOne">
            选项一
            </a>
        </div>
        <div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
            <div class="card-body">
            #1 内容：CSDN -- 成就一亿技术人！！！
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
            选项二
        </a>
        </div>
         <div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
            <div class="card-body">
            #2 内容：CSDN -- 成就一亿技术人！！！
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">
            选项三
            </a>
        </div>
        <div id="collapseThree" class="collapse" data-bs-parent="#accordion">
            <div class="card-body">
            #3 内容：CSDN -- 成就一亿技术人！！！
            </div>
        </div>
    </div>
</div>

---

JavaScript 注释

---

JavaScript 注释可用于提高代码的可读性。

---

JavaScript 注释

JavaScript 不会执行注释。

我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。

单行注释以 // 开头。

本例用单行注释来解释代码：

// 输出标题：
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
// 输出段落：
document.getElementById("myP").innerHTML="这是我的第一个段落。";

---

JavaScript 多行注释

多行注释以 /* 开始，以 */ 结尾。

下面的例子使用多行注释来解释代码：

/*
下面的这些代码会输出
一个标题和一个段落
并将代表主页的开始
*/
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
document.getElementById("myP").innerHTML="这是我的第一个段落。";

---

使用注释来阻止执行

在下面的例子中，注释用于阻止其中一条代码行的执行（可用于调试）：

// document.getElementById("myH1").innerHTML="欢迎来到我的主页";
document.getElementById("myP").innerHTML="这是我的第一个段落。";

在下面的例子中，注释用于阻止代码块的执行（可用于调试）：

/*
document.getElementById("myH1").innerHTML="欢迎来到我的主页";
document.getElementById("myP").innerHTML="这是我的第一个段落。";
*/

---

在行末使用注释

在下面的例子中，我们把注释放到代码行的结尾处：

var x=5;    // 声明 x 并把 5 赋值给它
var y=x+2;  // 声明 y 并把 x+2 赋值给它

---

应用注释符号验证浏览器是否支持 JavaScript 脚本功能

如果用户不能确定浏览器是否支持JavaScript脚本，那么可以应用HTML提供的注释符号进行验证。HTML注释符号是以 <-- 开始以 --> 结束的。如果在此注释符号内编写 JavaScrip t脚本，对于不支持 JavaScript 的浏览器，将会把编写的 JavaScript 脚本作为注释处理。

使用 JavaScript 脚本在页面中输出一个字符串，将 JavaScript 脚本编写在 HTML 注释中，如果浏览器支持 JavaScript 将输出此字符串，如果不支持将不输出此字符串，代码如下:

<script>
<!--
document.write("您的浏览器支持JavaScript脚本!");
//-->
</script>

注意：注释行结尾处的两条斜杠 // 是 JavaScript 注释符号。这可以避免 JavaScript 执行 --> 标签。