如何实现点击<div>调整尺寸，再次点击恢复原尺寸？

原代码的问题 #

• 第一段代码里的$('#business').click()是直接触发点击事件，而非绑定点击后的回调逻辑，所以页面加载时就会自动执行，完全不需要用户点击。
• 第二段代码仅绑定了固定设置高度为500px的逻辑，没有状态判断，因此无法实现点击切换尺寸的效果。

解决方案 #

方法1：用变量记录状态切换

通过变量记录当前元素的尺寸状态，点击时根据状态切换高度：

var isLarge = false; // 初始状态为小尺寸
$('#business').click(function() {
  if (!isLarge) {
    $(this).css('height', '500px');
    isLarge = true;
  } else {
    $(this).css('height', '100px');
    isLarge = false;
  }
});

方法2：通过当前高度判断切换

不需要额外变量，直接获取元素当前高度来判断切换：

$('#business').click(function() {
  const currentHeight = $(this).height(); // 获取数值型高度，避免单位问题
  if (currentHeight === 100) {
    $(this).css('height', '500px');
  } else {
    $(this).css('height', '100px');
  }
});

注：用.height()获取的是不带单位的数值，比.css('height')更稳妥，避免出现auto或不同单位的情况。

方法3：用CSS类切换（推荐）

将样式逻辑放到CSS中，通过切换类名实现尺寸变化，更符合代码分离原则：

/* 先定义两个尺寸类 */
.business-small {
  height: 100px;
}
.business-large {
  height: 500px;
}

// 初始化给元素加默认小尺寸类
$('#business').addClass('business-small');

// 点击时切换类
$('#business').click(function() {
  $(this).toggleClass('business-small business-large');
});

内容的提问来源于stack exchange，提问作者Iblg