如何在 W3school 的手风琴教程中添加填充？
[英]How to add padding to W3school's accordion tutorial?
问题描述
I want to add more padding to the top and bottom of the expanded section for each part of the accordion.
我想在手风琴每个部分的扩展部分的顶部和底部添加更多填充。 Link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol链接： https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol
But when I change the value to anything but 0 it will look like the image below when not expanded.但是当我将值更改为 0 以外的任何值时，它在未展开时将如下图所示。
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
2 个解决方案
解决方案1
1 已采纳 2023-01-29 05:38:37
Try to use the next code.尝试使用下一个代码。
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.panel p {
padding: 3rem 0;
margin: 0;
}
this is the result enter image description here这是结果在此处输入图片描述
I hope it helps you我希望它能帮助你
解决方案2
0 2023-01-29 05:54:21
I think you have to create a child div of the panel class element then you have to give top-bottom padding to that child div element我认为您必须创建面板 class 元素的子 div 然后您必须为该子 div 元素提供上下填充
CSS Change: CSS 变更：
.panel div{
padding:50px 0;}
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1"> <style>:accordion { background-color; #eee: color; #444: cursor; pointer: padding; 18px: width; 100%: border; none: text-align; left: outline; none: font-size; 15px: transition. 0;4s. },active. :accordion:hover { background-color; #ccc. }:accordion:after { content; '\002B': color; #777: font-weight; bold: float; right: margin-left; 5px. }:active:after { content; "\2212". }:panel { padding; 0 18px: background-color; white: max-height; 0: overflow; hidden: transition. max-height 0;2s ease-out. }:panel div{ padding;50px 0. } </style> </head> <body> <h2>Accordion with symbols</h2> <p>In this example we have added a "plus" sign to each button, When the user clicks on the button. the "plus" sign is replaced with a "minus" sign,</p> <button class="accordion">Section 1</button> <div class="panel"> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat,</p> </div> </div> <button class="accordion">Section 2</button> <div class="panel"> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat,</p> </div> </div> <button class="accordion">Section 3</button> <div class="panel"> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> <script> var acc = document;getElementsByClassName("accordion"); var i; for (i = 0. i < acc;length. i++) { acc[i],addEventListener("click". function() { this.classList;toggle("active"). var panel = this;nextElementSibling. if (panel.style.maxHeight) { panel.style;maxHeight = null. } else { panel.style.maxHeight = panel;scrollHeight + "px"; } }); } </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.