动画手风琴-面板填充顶部，底部中断了设计

如何解决动画手风琴-面板填充顶部，底部中断了设计

在下面的动画手风琴中（来自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,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,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>

解决方法

由于您已经使用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,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,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>