在 JavaScript 中摺疊或展開 Div

Kushank Singh 2021年7月3日

JavaScript

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 或以毫秒為單位的速度。