时间戳

首页 > 解决方案 > 为什么我们可以在动画手风琴中使用 height 属性而不是 max-height 属性？

javascript - 为什么我们可以在动画手风琴中使用 height 属性而不是 max-height 属性？

问题描述

为什么在这段代码中我可以使用高度而不是最大高度，所以它仍然有效？第二个问题是：为什么我们必须在高度为零时将溢出属性设置为隐藏。 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_animate 它是上面的原始代码。

 
    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.height){
          panel.style.height = null;
        } else {
         panel.style.height = panel.scrollHeight + "px";
        } 
       });
     }
    
 <!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;
    }
    .panel {
      padding: 0 18px;
      background-color: white;
      height: 0;
      overflow: hidden;
      transition: 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>
   
     </body>
     </html>

标签： javascripthtmlcss

解决方案

  1. max-height- 允许元素小于设定值。例如height: 20px; max-height: 30px;-> 元素的高度为 20px。当您申请时，height您不允许使用任何其他大小的元素而不是您设置的元素。max-height这就是为什么它可以与and一起正常工作的原因height。检查最大高度和高度

  2. overflow:hidden; height: 0;是必需的，因为即使您将高度设置为小于内容，此内容仍然会在框外可见。设置overflow: hidden将隐藏超过高度的元素内容。

推荐阅读