在 JavaScript 中折叠或展开 Div
Kushank Singh
2021年7月3日
jQuery 是一个轻量级且速度非常快的 javascript 库。它简化了 JavaScript 的使用。
div 标签是一个分割标签。它用于定义 HTML 文档中的一个部分。它还充当其他 HTML 元素的容器。
在本教程中，我们将使用 jQuery 折叠或展开 div。
检查下面给出的示例。
<fieldset class="click" >
<legend class="buttonMain" style="cursor: pointer">Expand</legend>
<div class="content" style="display:none">
<p>Lorem ipsum...</p>
</div>
上面的 HTML 代码包含一些元素，包括 div 标签。我们正在使用 jQuery 操作 div 以使其可折叠。
在 jQuery 中，show() 和 hide() 方法用于显示或隐藏 HTML 中的任何元素。
我们可以使用这些函数折叠或展开 div 标签，如下所示。
$('.buttonMain').click(function(){
if($(this).text()=='Expand'){
$('.content').show();
$(this).text('Collapse');
} else {
$('.content').hide();
$(this).text('Expand');
}
});
我们还可以在这些函数中使用 speed 参数指定隐藏和显示元素的速度。我们可以将其值确定为 slow、fast 或以毫秒为单位的速度。