求助：点击按钮切换#portfolio div高度实现展开收起功能遇异常

嘿，我来帮你搞定这个「查看更多」的切换功能！你遇到的两个小麻烦其实都挺常见的，咱们一步步拆解解决：

1. 先搞定自适应内容高度的问题 #

你之前用固定高度的方式肯定受限，毕竟内容长度没法提前确定。推荐用max-height配合CSS过渡来实现，既能保留动画效果，又能完美适配内容高度：

首先给#portfolio加基础样式：

#portfolio {
  max-height: 100px; /* 收起时的默认高度，根据你的需求调整 */
  overflow: hidden;
  transition: max-height 0.3s ease; /* 平滑过渡动画 */
  position: relative; /* 确保元素在正常文档流中，避免布局偏移 */
}

如果担心预设的max-height不够大（比如内容特别长），可以用JS动态获取元素的真实内容高度（scrollHeight属性），这样更精准：

const portfolio = document.getElementById('portfolio');
const toggleBtn = document.querySelector('.toggle-btn'); // 替换成你的按钮选择器

toggleBtn.addEventListener('click', () => {
  if (portfolio.classList.contains('expanded')) {
    // 收起逻辑：还原默认max-height
    portfolio.style.maxHeight = '100px';
    portfolio.classList.remove('expanded');
    toggleBtn.textContent = '查看更多';
  } else {
    // 展开逻辑：设置为内容真实高度
    const realContentHeight = portfolio.scrollHeight + 'px';
    portfolio.style.maxHeight = realContentHeight;
    portfolio.classList.add('expanded');
    toggleBtn.textContent = '收起';
  }
});

这样就不用硬写固定高度，完全根据内容自动调整展开后的高度了。

2. 解决点击后div滑出视野的问题 #

你说点击按钮后div滑出视野，大概率是因为元素高度变化时，页面自动滚动导致的偏移。试试这两个办法：

• 办法一：锁定滚动位置
  在点击事件触发时，先记录当前页面的滚动位置，动画结束后再恢复这个位置，避免页面乱跑：

  toggleBtn.addEventListener('click', () => {
    // 记录当前滚动位置
    const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
    
    // 上面的展开/收起逻辑...
    
    // 动画结束后恢复滚动位置（时间和transition时长保持一致）
    setTimeout(() => {
      window.scrollTo(0, currentScrollTop);
    }, 300);
  });
  

• 办法二：检查元素定位与周边样式
  如果#portfolio用了position: absolute或fixed，可能会脱离文档流导致布局偏移，改成position: relative试试；另外也可以检查一下有没有其他CSS规则（比如margin、padding的动态变化）影响了元素的位置。

完整可运行示例 #

把这些逻辑整合起来，完整代码如下：

<div id="portfolio">
  <!-- 你的长内容 -->
  这里是一段很长很长的测试文本，用来模拟你的真实内容。这里是一段很长很长的测试文本，用来模拟你的真实内容。这里是一段很长很长的测试文本，用来模拟你的真实内容。这里是一段很长很长的测试文本，用来模拟你的真实内容。这里是一段很长很长的测试文本，用来模拟你的真实内容。
</div>
<button class="toggle-btn">查看更多</button>

<style>
#portfolio {
  max-height: 100px;
  overflow: hidden;
  transition: max-height 0.3s ease;
  position: relative;
  border: 1px solid #eee;
  padding: 10px;
}
.toggle-btn {
  margin-top: 10px;
  padding: 8px 16px;
  cursor: pointer;
}
</style>

<script>
const portfolio = document.getElementById('portfolio');
const toggleBtn = document.querySelector('.toggle-btn');

toggleBtn.addEventListener('click', () => {
  const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
  
  if (portfolio.classList.contains('expanded')) {
    portfolio.style.maxHeight = '100px';
    portfolio.classList.remove('expanded');
    toggleBtn.textContent = '查看更多';
  } else {
    const realHeight = portfolio.scrollHeight + 'px';
    portfolio.style.maxHeight = realHeight;
    portfolio.classList.add('expanded');
    toggleBtn.textContent = '收起';
  }
  
  setTimeout(() => {
    window.scrollTo(0, currentScrollTop);
  }, 300);
});
</script>

这样应该就能完美解决你的问题了：既可以自适应内容高度展开收起，又不会出现div滑出视野的情况。

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