📌  相关文章
📜  使用 jQuery 单击时如何增加分区的大小？(1)

📅  最后修改于: 2023-12-03 15:36:30.755000             🧑  作者: Mango

使用 jQuery 单击时如何增加分区的大小？

使用 jQuery，我们可以通过添加/删除 CSS 类来动态改变元素的大小。以下是一些步骤：

  1. 选择要更改大小的元素。

    $("#myDiv")

  2. 添加一个单击事件到该元素。

    $("#myDiv").click(function() {
// 在这里添加要执行的代码
});

  3. 在事件处理程序中添加代码以更改元素的大小。可以使用 addClass() 和 removeClass() 来添加/删除 CSS 类。

    $("#myDiv").click(function() {
  // 将元素的高度增加 100 像素
  $(this).addClass("larger");
});

  4. 在 CSS 中定义 .larger 类，以指定要更改的样式。例如，可以将高度增加 100 像素。

    .larger {
  height: 200px;
}

完整的代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery 更改大小</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    #myDiv {
      width: 200px;
      height: 100px;
      background-color: red;
      transition: height 0.5s ease;
    }

    .larger {
      height: 200px;
    }
  </style>
</head>
<body>
  <div id="myDiv"></div>
  <script>
    $("#myDiv").click(function() {
      $(this).addClass("larger");
    });
  </script>
</body>
</html>

当单击 myDiv 元素时，它的高度将从 100 像素增加到 200 像素，具有过渡效果。