点击按钮触发高度变化与文本展开的JS交互需求（附代码）

我来帮你搞定这个点击展开文本的需求，核心思路是用CSS的max-height结合过渡动画，配合JavaScript切换类来控制内容的显示/隐藏，具体实现步骤如下：

1. 调整HTML结构 #

给文本内容添加专属类方便样式控制，同时把跳转链接改成按钮（更符合按钮语义，也避免默认跳转问题）：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="mgh-common-header text-center" data-aos="fade-up" data-aos-easing="ease-in-cubic" data-aos-duration="1500" data-aos-delay="0">
    <h2>Standards & Compliances</h2>
    <p>Maintaining the highest of standards while conforming to regulations</p>
  </div>
  <div class="mgh-std-com">
    <div class="row text-center justify-content-sm-center">
      <div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-4 m-auto" data-aos="fade-up" data-aos-easing="ease-in-cubic" data-aos-duration="1500" data-aos-delay="0">
        <div class="mgh-std-com-sitem text-center">
          <div class="mgh-sc-box mb-3">
            <img src="assets/images/std-one.svg" alt="">
          </div>
          <h5> At MGH Healthcare, quality is a shared responsibility </h5>
          <!-- 添加.mgh-sc-content类用于控制文本显示 -->
          <p class="mgh-sc-content">Quality is the core value of MGH Healthcare that it ensures to be implemented at all levels. ADS’s management will ensure that this policy and relevant all legal and regulatory requirements are effectively communicated to the employees and other concerned personnel of quality assurance and operations to uphold company’s high standards of quality compliance at all times.</p>
          <!-- 改用button标签，更符合交互语义 -->
          <button class="mgh-btn">read more</button>
        </div>
      </div>
      <div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-4 m-auto pt-5 pt-xl-0" data-aos="fade-up" data-aos-easing="ease-in-cubic" data-aos-duration="1500" data-aos-delay="1000">
        <div class="mgh-std-com-sitem text-center">
          <div class="mgh-sc-box mb-3">
            <img src="assets/images/std-two.svg" alt="">
          </div>
          <h5> Putting safety of products, customers and employees as </h5>
          <p class="mgh-sc-content">As a responsible business organization, MGH Healthcare operates its business according to the directives and guidelines of GxP, HSE and other local regulatory authorities. MGH Healthcare has stringent mandatory quality standards which ensure quality and safety of its products which conform to the relevant industry and regulatory standards.</p>
          <button class="mgh-btn">read more</button>
        </div>
      </div>
      <div class="col-12 col-sm-10 col-md-8 col-lg-7 col-xl-4 m-auto pt-5 pt-xl-0" data-aos="fade-up" data-aos-easing="ease-in-cubic" data-aos-duration="2000" data-aos-delay="2000">
        <div class="mgh-std-com-sitem text-center">
          <div class="mgh-sc-box mb-3">
            <img src="assets/images/std-three.svg" alt="">
          </div>
          <h5> Building and maintaining a system to ensure quality and safety at all levels. </h5>
          <p class="mgh-sc-content">MGH Healthcare maintains a management system, which proactively and continuously develop its processes and systems to ensure quality and safety throughout the whole chain by providing training and resources. MGH Healthcare regularly evaluates and improves its performances using both internal and external measures. </p>
          <button class="mgh-btn">read more</button>
        </div>
      </div>
    </div>
  </div>
</div>

2. 更新CSS样式 #

给文本设置默认截断样式，添加过渡动画，再写一个展开状态的类：

.mgh-std-com-area { margin: 80px 0; }
.mgh-std-com-sitem { transition: all 0.4s ease-in-out; padding: 50px; display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative; cursor: pointer; }
.mgh-std-com-sitem:hover { background: #EEF9F9; }
.mgh-std-com-sitem:hover>.mgh-sc-box { background: #ffffff; }
.mgh-std-com-sitem .mgh-sc-box { transition: all 0.4s ease-in-out; display: flex; justify-content: center; align-items: center; width: 140px; height: 140px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: #EEF9F9; }
.mgh-std-com-sitem .mgh-sc-box img { width: 50px; height: 50px; }
.mgh-std-com-sitem h5 { color: #2F2F2F; position: relative; padding-bottom: 30px; font-size: calc(22px + (30 - 22) * ((100vw - 300px) / (1600 - 300))); }
.mgh-std-com-sitem h5::after { content: ''; width: 80px; height: 3px; background: #349DCD; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
/* 新增：文本默认截断样式，带过渡动画 */
.mgh-std-com-sitem .mgh-sc-content { 
  margin-top: 20px; 
  color: #2f2f2f; 
  font-size: calc(16px + (22 - 16) * ((100vw - 300px) / (1600 - 300)));
  max-height: 80px; /* 默认显示的高度，可按需调整 */
  overflow: hidden;
  transition: max-height 0.6s ease-in-out; /* 平滑过渡动画 */
}
/* 新增：文本展开状态的样式 */
.mgh-std-com-sitem .mgh-sc-content.active {
  max-height: 500px; /* 设置足够大的值，确保能容纳所有文本 */
}
.mgh-btn { transition: all 0.6s ease-in-out; background-image: linear-gradient(to right, #50C1C4, #349DCD); color: #ffffff; text-decoration: none; padding: .9em 1em; font-size: 16px; text-transform: uppercase; letter-spacing: 1px; width: 180px; display: inline-block; text-align: center; border: none; cursor: pointer; }
.mgh-btn:hover { background-image: linear-gradient(to left, #50C1C4, #349DCD); text-decoration: none; color: #ffffff; }

3. 添加JavaScript交互 #

给每个按钮绑定点击事件，切换文本的展开/收起状态，同时更新按钮文字：

// 获取所有展开/收起按钮
const toggleButtons = document.querySelectorAll('.mgh-btn');

toggleButtons.forEach(button => {
  button.addEventListener('click', function() {
    // 找到当前按钮对应的文本内容元素
    const targetContent = this.previousElementSibling;
    // 切换文本的展开/收起类
    targetContent.classList.toggle('active');
    // 更新按钮显示文字
    this.textContent = targetContent.classList.contains('active') ? 'close' : 'read more';
  });
});

关键细节说明 #

• 用max-height而非height做过渡：因为height需要固定值，而max-height可以自适应内容高度，过渡效果更自然流畅。
• 可根据实际文本长度调整max-height的默认值和展开值，确保展开状态能完全显示所有内容。
• 如果坚持使用<a>标签而非<button>，需要在JS事件里添加event.preventDefault()来阻止默认跳转行为。

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