仅在小屏幕下通过按钮切换Div高度的问题及纯JavaScript实现方案

我来帮你搞定这个问题，你的代码核心问题是每次窗口 resize 时都会重复绑定点击事件，导致按钮点击一次会触发多次状态切换，而且窗口尺寸变化后没有同步重置容器状态，所以必须刷新才正常。下面分别给出修复后的 jQuery 版本和纯 JavaScript 实现方案：

jQuery 修复版本 #

问题分析 #

原来的代码里，resize 函数每次执行都会给 .btn 绑定新的点击事件——窗口调整几次，点击事件就叠加几次，这直接导致点击按钮时 toggleClass 被多次触发，状态彻底混乱。另外，当窗口从窄变宽时，没有自动移除 small-window 类，大屏幕下容器高度还是保持修改后的状态。

修复后的代码 #

JavaScript

$(document).ready(function() {
  // 只绑定一次点击事件，彻底避免重复绑定问题
  $('.btn').on('click', function() {
    $('.container').toggleClass('small-window');
  });

  function handleResize() {
    const isSmallScreen = window.innerWidth <= 700;
    const $container = $('.container');
    
    // 大屏幕下强制移除类，恢复容器原始高度
    if (!isSmallScreen) {
      $container.removeClass('small-window');
    }
  }

  // 页面加载时先执行一次，初始化状态
  handleResize();
  // 加入防抖优化，避免窗口拖动时频繁触发状态判断
  let resizeTimer;
  $(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(handleResize, 250);
  });
});

CSS（保留你原有的代码即可）

body { font-family: Arial, sans-serif; } 
h1 { font-size: 20px; } 
.block-text { display: block; } 
.container { 
  position: relative; 
  border: 1px solid; 
  min-height: 60px; 
  /* 大屏幕下布局 */ 
  display: flex; 
  align-items: center; 
  padding-left: 10px; 
} 
.btn { 
  position: absolute; 
  right: 10px; 
  display: none; 
  text-transform: uppercase; 
} 
@media (max-width: 700px) { 
  .btn { display: block; } 
} 
.small-window { height: 120px !important; } 
span { display: block; margin-top: 8px; }

关键优化点

• 点击事件只在页面初始化时绑定一次，解决重复绑定导致的状态混乱
• 窗口尺寸变化时，自动同步容器状态：大屏幕下强制恢复原始高度
• 防抖处理减少了resize事件的触发频率，提升页面性能

纯 JavaScript 实现方案 #

如果不想依赖jQuery，纯JS的实现思路完全一致：绑定一次点击事件，监听窗口resize并同步状态，同样加入防抖优化：

完整代码 #

HTML

<div class="container"> 
  <h1>Resize Window</h1> 
  <button type="button" class="btn">Toggle height</button> 
</div>

CSS（和上面的CSS代码一致）

body { font-family: Arial, sans-serif; } 
h1 { font-size: 20px; } 
.block-text { display: block; } 
.container { 
  position: relative; 
  border: 1px solid; 
  min-height: 60px; 
  /* 大屏幕下布局 */ 
  display: flex; 
  align-items: center; 
  padding-left: 10px; 
} 
.btn { 
  position: absolute; 
  right: 10px; 
  display: none; 
  text-transform: uppercase; 
} 
@media (max-width: 700px) { 
  .btn { display: block; } 
} 
.small-window { height: 120px !important; } 
span { display: block; margin-top: 8px; }

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const btn = document.querySelector('.btn');
  const container = document.querySelector('.container');
  
  // 绑定一次点击事件
  btn.addEventListener('click', function() {
    container.classList.toggle('small-window');
  });

  function handleResize() {
    const isSmallScreen = window.innerWidth <= 700;
    
    // 大屏幕下重置容器状态
    if (!isSmallScreen) {
      container.classList.remove('small-window');
    }
  }

  // 初始化状态
  handleResize();

  // 防抖处理的resize监听
  let resizeTimer;
  window.addEventListener('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(handleResize, 250);
  });
});

说明

• 用原生 document.querySelector 获取DOM元素，替代jQuery选择器
• 用 classList.toggle 和 classList.remove 操作类名，和jQuery的对应方法效果完全一致
• 同样加入防抖优化，避免窗口拖动时频繁执行状态判断

这样不管窗口怎么调整，都不需要刷新页面就能正常工作：小屏幕下按钮可见，点击切换高度；大屏幕下按钮自动隐藏，容器也会立刻恢复原始高度。

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