香草 JavaScript 切換 function 將我的 h2 標簽向上移動
[英]Vanilla JavaScript toggle function moves my h2 tag up
問題描述
我有一個小問題，我找不到解決方案，這讓我很沮喪。 我包含一個指向我的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>
2 個解決方案
解決方案1
1 已采納 2021-01-12 14:52:32
發生這種情況的原因是因為您使用 Flexbox 將所有內容垂直居中對齊。 當您單擊 H2 並顯示更多內容時，“中心”自然會移動以適應其他內容。 如果您不希望它在單擊時移動，那么您需要移除 styles，它使用 Flexbox 垂直居中。
解決方案2
1 2021-01-12 14:59:47
問題是 class “卡”上的 flexbox 樣式。
justify-content: center
這種風格將 div 中的所有元素垂直居中。 刪除它會得到你想要的行為，但一切都會在頂部對齊。
如何在vanilla JavaScript中實現“toggle類”功能？
[英]How to implement a 'toggle class' function in vanilla JavaScript?
如何使用javascript在包裝器div中找到下一個h2之前包裝h2標簽？
[英]How to wrap h2 tag until next h2 found in wrapper div using javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.