Html 动画手风琴面板填充（顶部，底部）打破了设计_Html_Css_Accordion_Jquery Ui Accordion

Html 动画手风琴面板填充（顶部，底部）打破了设计

html css

Html 动画手风琴面板填充（顶部，底部）打破了设计,html,css,accordion,jquery-ui-accordion,Html,Css,Accordion,Jquery Ui Accordion,在下面的动画手风琴（来自W3学校）中，我发现在面板上添加大的顶部+底部填充会破坏设计所以不是 .panel { padding: 0 18px; } 执行以下操作 .panel { padding: 22px 18px; } 导致您可以在面板中看到一些文本，这是不正常的这里有没有办法解决这个问题，这样面板的顶部/底部填充在未点击时不会显示出来。i、 e.只有在单击时才能看到它 <style> .accordion { background-color:

在下面的动画手风琴（来自W3学校）中，我发现在面板上添加大的顶部+底部填充会破坏设计

所以不是

.panel {
  padding: 0 18px; 
}

执行以下操作

.panel {
  padding: 22px 18px; 
}

导致

您可以在面板中看到一些文本，这是不正常的

这里有没有办法解决这个问题，这样面板的顶部/底部填充在未点击时不会显示出来。i、 e.只有在单击时才能看到它

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

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>

<h2>Animated Accordion</h2>
<p>Click on the buttons to open the collapsible content.</p>

<button class="accordion">Section 1</button>
<div class="panel">
  <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>

<button class="accordion">Section 2</button>
<div class="panel">
  <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>

<button class="accordion">Section 3</button>
<div class="panel">
  <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>

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


.手风琴{
背景色：#eee；
颜色：#444；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
过渡：0.4s；
}
.活动，.手风琴：悬停{
背景色：#ccc；
}
.小组{
填充：0 18px；
背景色：白色；
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
}
动画手风琴
单击按钮打开可折叠内容
第一节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作
第二节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作
第三节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作
var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i

由于您已经在使用JS来实现在面板处于活动状态时应用于文本字段的更改，因此您基本上也可以包括填充更改，并使过渡平滑。下面的示例片段对我在何处进行更改以及更改内容/原因进行了注释

var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i


手风琴{
背景色：#eee；
颜色：#444；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
过渡：0.4s；
}
.活动，.手风琴：悬停{
背景色：#ccc；
}
.小组{
/*将此作为所需的基本填充*/
填充：0 18px；
背景色：白色；
最大高度：0；
溢出：隐藏；
/*将过渡更改为“全部”，使其影响高度和填充*/
过渡：所有0.2秒缓解；
}


动画手风琴
单击按钮打开可折叠内容
第一节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作
第二节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作
第三节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作

外观中断会导致整个应用的填充不被视为高度的一部分，而是附加样式。所以您可以为元素指定0高度，并且仍然使用填充使其具有可见内容。这就是它断裂的原因。我在下面给出了一个建议，当你真的想保留填充物时，如何解决这个问题