javascript - 单击 JS 事件触发时内容高度发生变化

Question

在这里我添加了预期的布局和 codepen存储库

这是我的前端代码

.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 p {
  margin-top: 20px;
  color: #2f2f2f;
  font-size: calc(16px + (22 - 16) * ((100vw - 300px) / (1600 - 300)));
}

.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;
}

.mgh-btn:hover {
  background-image: linear-gradient(to left, #50C1C4, #349DCD);
  text-decoration: none;
  color: #ffffff;
}

<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>

          <p>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>

          <a href="" class="mgh-btn">read more</a>
        </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>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>

          <a href="" class="mgh-btn">read more</a>
        </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>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>

          <a href="" class="mgh-btn">read more</a>
        </div>
      </div>
    </div>
  </div>
</div>

我必须需要，当点击按钮高度将被改变并且文本将被扩展并带有一些 css 过渡效果!添加了示例屏幕截图。

提前致谢!

Answer 1

请试试这个，

尝试操作 text-matter 类的 css 并根据需要调整高度，该类用于隐藏额外的文本，当单击按钮时将显示全文。

检查这个Pen

var classname = document.getElementsByClassName("mgh-btn");
  var font_to_incr_by = 2;
  var sibling;
  var myFunction = function() {
    sibling = this.previousElementSibling;
    this.previousElementSibling.classList.remove('text-matter');
    this.previousElementSibling.classList.add('text-matter-rev');
    var font_h5 = parseFloat(window.getComputedStyle(sibling.previousElementSibling, null).getPropertyValue('font-size'));
    sibling.previousElementSibling.style.fontSize = (font_h5 + font_to_incr_by) + 'px';
    var font_p = parseFloat(window.getComputedStyle(sibling, null).getPropertyValue('font-size'));
    sibling.style.fontSize = (font_p + font_to_incr_by) + 'px';
    this.closest(".mgh-std-com-sitem").classList.add("border-blue");
    this.closest(".mgh-std-com-sitem").style.padding='0';
    for (let i = 0; i < classname.length; i++) {
      if (classname[i].previousElementSibling != this.previousElementSibling) {
        let sibling = classname[i].previousElementSibling;
        classname[i].previousElementSibling.classList.add('text-matter');
        classname[i].previousElementSibling.classList.remove('text-matter-rev');
        classname[i].closest(".mgh-std-com-sitem").classList.remove("border-blue");
        sibling.previousElementSibling.style.fontSize = font_h5 + 'px';
        sibling.style.fontSize = font_p + 'px';
        classname[i].closest(".mgh-std-com-sitem").style.padding='50px';
      }
    }
  };

  var myFunction2 = function() {
    sibling == this ? this.nextElementSibling.classList.add('clicked') : this.nextElementSibling.classList.remove('clicked');
  };

  for (let i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', myFunction, false);
    classname[i].previousElementSibling.addEventListener('transitionend', myFunction2, false);
  }

.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;
    border: 2px solid transparent;
    height: 600px
  }

  .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 p {
    margin-top: 20px;
    color: #2f2f2f;
    font-size: calc(16px + (22 - 16) * ((100vw - 300px) / (1600 - 300)));
  }

  .mgh-btn {
    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;
    margin-top: 10px;
  }

  .mgh-btn:hover {
    background-image: linear-gradient(to left, #50C1C4, #349DCD);
    text-decoration: none;
    color: #ffffff;
  }

  .text-matter {
    max-height: 125px;
    overflow: hidden;
    transition: all linear 1s;
  }

  .text-matter-rev {
    max-height: 500px;
    transition: all linear 1s;
  }

  .clicked {
    display: none;
  }

  .border-blue {
    border: 2px solid #84c9f3 !important;
  }
  .mgh-std-com{
    height: 600px
  }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js'></script>
<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>

            <p class="text-matter">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>

            <a class="mgh-btn">read more</a>
          </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="text-matter">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>

            <a class="mgh-btn">read more</a>
          </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="text-matter">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>

            <a class="mgh-btn">read more</a>
          </div>
        </div>
      </div>
    </div>
  </div>