香草 JavaScript 切换 function 将我的 h2 标签向上移动
[英]Vanilla JavaScript toggle function moves my h2 tag up
问题描述
I have a small problem which I can't find the solution for and it's making me frustrated.
我有一个小问题，我找不到解决方案，这让我很沮丧。 I am including a link to my CodePen where you can check the code.我包含一个指向我的CodePen的链接，您可以在其中检查代码。 The problem is that the h2 tag moves up a little once it is clicked and the hidden content displayed.问题是一旦点击 h2 标签并显示隐藏的内容，它就会向上移动一点。 I want it to stay in place and the hidden content to take space below and not move the h2 tag up a few pixels.我希望它保持原位，隐藏的内容在下面占据空间，而不是将 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>
2 个解决方案
解决方案1
1 已采纳 2021-01-12 14:52:32
The reason this is happening is because you are using Flexbox to align everything centered vertically.发生这种情况的原因是因为您使用 Flexbox 将所有内容垂直居中对齐。 When you click on the H2 and more content is displayed then naturally the "center" moves to accommodate for the additional content.当您单击 H2 并显示更多内容时，“中心”自然会移动以适应其他内容。 If you don't want it to move when clicked then you'll need to remove the styles which are centering it vertically with Flexbox.如果您不希望它在单击时移动，那么您需要移除 styles，它使用 Flexbox 垂直居中。
解决方案2
1 2021-01-12 14:59:47
The problem is the flexbox styling on your class "card".问题是 class “卡”上的 flexbox 样式。
justify-content: center
This style is centering all of your elements inside of your div vertically.这种风格将 div 中的所有元素垂直居中。 Removing it will get you the desired behaviour but everything will be aligned at the top.删除它会得到你想要的行为，但一切都会在顶部对齐。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.