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

【问题标题】：Animated accordion - panel padding (top, bottom) breaks design动画手风琴 - 面板填充（顶部，底部）打破了设计
【发布时间】：2021-02-08 17:23:10
【问题描述】：

在下面的动画手风琴（来自 W3 学校 https://www.w3schools.com/howto/howto_js_accordion.asp）中，我发现在面板中断设计中添加大的顶部+底部填充。

所以而不是

.panel {
  padding: 0 18px; 
}

执行以下操作

.panel {
  padding: 22px 18px; 
}

导致

你可以在面板中看到一些文字，这是不对的。

有没有办法在此处解决此问题，以便在未单击面板时不显示面板的顶部/底部填充。即只有当它被点击时你才能看到它

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

【问题讨论】：

外观中断导致完全应用的填充不被视为高度的一部分，而是额外的样式。所以你可以给一个元素 0 高度，并且仍然使它具有可见的填充内容。这就是它破裂的原因。我在下面回答了一个建议，当你真的想要填充时如何解决这个问题

标签： html css accordion jquery-ui-accordion

【解决方案1】：

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

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;
      //add padding-changes, same as base-padding
      panel.style.padding = "0px 18px";
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
      //add padding-changes you want to apply when active
      panel.style.padding = "22px 18px";
    } 
  });
}

.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 {
  /*keep this as the base-padding you want*/
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  /*Make transition changes to "all" so it affects height and padding*/
  transition: all 0.2s ease-out;
}

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

【讨论】：