在按钮上单击显示折叠 div jquery - Javascript

在编写网页时，常常需要折叠显示某些内容，以便更好地组织页面结构。本文将介绍如何使用 jQuery 和 Javascript 实现在按钮上单击显示折叠 div。

准备工作

在开始编程前，需要引入 jQuery 库，可以在头部添加以下代码：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

编写 HTML 结构

接下来，编写 HTML 结构，在需要折叠的内容外包裹一个 div，并添加一个按钮用来触发折叠。下面是一个示例：

<button id="toggle-button">显示/隐藏</button>
<div id="toggle-div">
  <p>这里是需要折叠的内容。</p>
</div>

编写 JavaScript 代码

完成 HTML 结构后，就可以编写 JavaScript 代码了。首先，需要定义一个变量用来保存折叠 div 的状态，即是否显示。然后，使用 jQuery 绑定按钮的点击事件，在点击时切换折叠 div 的显示状态。最后，添加动画效果以优化用户体验。下面是完整的代码：

$(document).ready(function() {
  var isHidden = true;
  $('#toggle-button').click(function() {
    if (isHidden) {
      $('#toggle-div').slideDown();
    } else {
      $('#toggle-div').slideUp();
    }
    isHidden = !isHidden;
  });
});

效果展示

完成以上步骤后，刷新网页，点击按钮即可看到折叠 div 的显示效果。

现在，你已经学会了如何使用 jQuery 和 JavaScript 实现在按钮上单击显示折叠 div。使用这个功能将有助于更好地组织网页内容，提高用户体验。