javascript - Vanilla JavaScript 切换功能将我的 h2 标签向上移动

问题描述

我有一个小问题，我找不到解决方案，这让我很沮丧。我包含一个指向我的CodePen的链接，您可以在其中检查代码。问题是一旦点击 h2 标签并显示隐藏的内容，它就会向上移动一点。我希望它保持原位，隐藏的内容在下面占据空间，而不是将 h2 标签向上移动几个像素。

//Toggle hidden text on/off
function toggleContent(event) {
  if (event.target && event.target.className === "event-trigger") {
    var x = event.target.nextElementSibling;

    if (x.style.display == "block") {
      x.style.display = "none";
    } else if (x.style.display == "none") {
      x.style.display = "block";
    } else {
      x.style.display = "block";
    }
  }
}
document.addEventListener("click", toggleContent, true);

.contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 2em;
}

h1 {
  text-align: center;
  color: #1d1e35;
  font-size: 2.5em;
  margin-bottom: 0.5em;
}

h2 {
  font-size: 13px;
  margin: 1.2em 0 1.2em 0;
  color: #4a4b5e;
  z-index: 4;
}

h2:hover {
  color: #f47c57;
  cursor: pointer;
}

h2:focus {
  color: #4a4b5e;
}

h2::after {
  content: "";
  border: solid #f47c57;
  border-width: 0 3px 3px 0;
  padding: 2px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  float: right;
  margin-left: 1em;
}

.hidden-text {
  display: none;
  max-width: 21em;
  margin-bottom: 1em;
}

<body>
  <main>
    <div class="card">
      <div class="contents">
        <h1>FAQ</h1>

        <h2 class="event-trigger">How many team members can I invite?</h2>
        <p class="hidden-text">
          You can invite up to 2 additional users on the Free plan. There is
          no limit on team members for the Premium plan.
        </p>
        <hr />

        <h2 class="event-trigger">What is the maximum file upload size?</h2>
        <p class="hidden-text">
          No more than 2GB. All files in your account must fit your allotted
          storage space.
        </p>
        <hr />

        <h2 class="event-trigger">How do I reset my password?</h2>
        <p class="hidden-text">
          Click “Forgot password” from the login page or “Change password”
          from your profile page. A reset link will be emailed to you.
        </p>
        <hr />

        <h2 class="event-trigger">Can I cancel my subscription?</h2>
        <p class="hidden-text">
          Yes! Send us a message and we’ll process your request no questions
          asked.
        </p>
        <hr />

        <h2 class="event-trigger">Do you provide additional support?</h2>
        <p class="hidden-text">
          Chat and email support is available 24/7. Phone lines are open
          during normal business hours.
        </p>
        <hr />
      </div>
    </div>

    <div class="attribution">
      <p>
        Challenge by
        <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">
          Frontend Mentor</a>.<br />
        Coded by <a href="#">Žan Ferš</a>.
      </p>
    </div>
  </main>

  <script src="app.js"></script>
</body>

标签： javascripthtmlcss

javascript - Vanilla JavaScript 切换功能将我的 h2 标签向上移动

问题描述

解决方案

推荐阅读