javascript - 最大高度不起作用

Question

我有以下代码:

function toggle(index, mode) {
  var elem = document.getElementById("accordion-content" + index);
  var moreTime = document.getElementById("more-time-text" + index);
  var icon = document.getElementById("arr-icon" + index);
  var hoursTitle = document.getElementById("hours-title" + index);
  var clsName;
  var hoursTitleTxt = "";
  var buttonText = ""; /* If this accordion is close (need to close the other div that open, even if none is open) */
  if (elem.className == "accordion-content") { /* close all divs and change their icons to arrow down (though only one is open every moment) */
    collapseAll("accordion-content-clicked", "accordion-content"); /* change all div's text*/
    changeTexts(); /* open this div */
    clsName = "accordion-content-clicked"; /* change this div's icon */
    icon.className = "accordion_up"; /* change text of button and title */
    buttonText = "collapse";
    hoursTitleTxt = "week's hours:"; /*change text and only then expand*/
    hoursTitle.innerHTML = hoursTitleTxt;
    moreTime.innerHTML = buttonText;
    elem.addEventListener("transitionend", function afterEvent() {
      elem.removeEventListener("transitionend", afterEvent)
      /*elem.style.maxHeight = elem.offsetHeight + "px";*/
    });
    elem.className = clsName;
  } /* this div is open */
  else { /* close this div */
    clsName = "accordion-content"; /* change the text of the button and title according the mode we're in */
    if (mode == "Available") {
      hoursTitleTxt = "week's hours:";
      buttonText = "more hours";
    } else if (mode == "NotAvailableToCall") {
      hoursTitleTxt = "";
      buttonText = "working hours:";
    }
    icon.className = "accordion_down"; /* collapse and only then change text */
    elem.addEventListener("transitionend", function() {
      hoursTitle.innerHTML = hoursTitleTxt;
    });
    elem.className = clsName;
    moreTime.innerHTML = buttonText;
  }
} /* collapse all divs and change the icon to arrow down */
function collapseAll(fromClass, toClass) {
  $("." + fromClass).attr('class', toClass);
  $("[id^='arr-icon']").attr('class', "accordion_down");
}

function changeTexts() {
  var textList = $("[id^='more-time-text']");
  for (var i = 0; i < textList.length; i++) {
    var index = textList[i].getAttribute("index");
    var parent = document.getElementById("more-time" + index);
    var mode = parent.getAttribute("mode");
    var title = document.getElementById("hours-title" + index);
    var buttonText = "";
    var titleText = "";
    if (mode == "Available") {
      buttonText = "expand";
      titleText = "week's hours:";
    } else if (mode == "NotAvailableToCall") {
      buttonText = "week's hours";
      titleText = "";
    }
    textList[i].innerHTML = buttonText;
    title.innerHTML = titleText;
  }
}

.accordion {
  width: 94%;
  margin: 0 5%;
}

.accordion-toggle {
  -webkit-transition: background 1s linear;
  -moz-transition: background 1s linear;
  -ms-transition: background 1s linear;
  -o-transition: background 1s linear;
  transition: background 1s linear;
  background: white;
  border-radius: 3px;
  display: block;
  text-align: right;
  text-decoration: none;
}

.accordion-content {
  -webkit-transition: max-height 1s;
  -moz-transition: max-height 1s;
  -ms-transition: max-height 1s;
  -o-transition: max-height 1s;
  transition: max-height 1s;
  background: white;
  overflow: hidden;
  max-height: 0;
}
.accordion-content-clicked
{
  -webkit-transition: max-height 1s;
  -moz-transition: max-height 1s;
  -ms-transition: max-height 1s;
  -o-transition: max-height 1s;
  transition: max-height 1s;
  background: white;
  overflow: hidden;
  max-height: 220px;
}
td.accordion_down {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUCAYAAACaq43EAAAABHNCSVQICAgIfAhkiAAAAaVJREFUSIm91c9KG1EUx/HvuRGzKVl2NxRnLD6DD1BoH2AOgWz6RxroypXgqiB0W+hGQSYiLoRm3FfotlAo3RUEF9USyEoQDIJlbDxdjC1VJ5mZNMnZzb3n3s/cxY8jS+0fc/DrEVOsKySZOeNBt8bRU8EWpwU7rOlilaQCdcNOpoEabEc6v+kANjXoCJWGQX/C6Lce1VcA7s9ipP5HkLUJumdGJYzVu7gBA/Tw3xiyPxnXLW3p3OHfr3+3YpU+zDaAzjhJQ95G6u/d+I3bTS31Tg0XGiTjQfnUw1+9vX4HTnH/C8jy/6N2ckm1HqvceUQmnOLBhsHu6Ch9odLYUa+btT8QBqhSaxp2MKL9Ok1Kdkne6eft4wVH/ytwr6hoyH5LgyfDeoa+GCCNgHtWFAU618kYWrkwQKT+nsG7vD6DxHBhS73TscAAPYIVQz4P75LlNBH5VRiOVZJLZsNBw8Rgt6XBRtH7CsMAO+p1s4aJYQdVas0yd5WCIXOYnF9BuK73z8vckxunQfWi/f2DYI+BeqTz78uenxkVTiPz82WkD0ujAL8B/TCG0encSKQAAAAASUVORK5CYII=');
  width: 6px;
  background-repeat: no-repeat;
  background-size: contain;
  display: table-cell;
  vertical-align: middle;
  background-position: center;
}

td.accordion_up {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUCAYAAACaq43EAAAABHNCSVQICAgIfAhkiAAAAY5JREFUSIm91D9Lw1AUhvHn+KdFkAiCLsWhIAiCk4IIToLgKtgKDh1MHFydBEFwEpycBEFxEEFOwdXJTyG4mFQku4MI0qI9Dq20orZJiL6QITfnnl8uubmQMK6Gw57ebyed35N0ItQuQPY99Vf/DXY12BVsqXl7sq4PE3F7SNwJnlYWjfq1QO/nmGF3WYZmj4qjL1H7xFpxScOc8X7RjgIIMlnl+ThOr8hwQS3TT60syMhPzwXWXA02U4cdggPB5jpX2aGn/nSUfpG+saeVFaiXo9QCD0Z25rQ49tSpqOuKGzu2fhYRBcg3frXO6QgXNBwQ3q6AwRgwgi256u8khh2qJ4JMxkHbsudpsBAbdjXYFFhLiCLQa9QvSxrmIsONnWmHSdEWLiP9VC8LapmusKvhMFAW+FacDGfeobLfFW7uyHwaaAu3rQ0Nln+FXfV32g7/VGPYmav+eOtlmvnp8E8f5/aZ7Gy5OPbaA78f/mlHYMqhegQgBbWMQ3AjMP+X6NeY1zfEYw44b17/wyK1DzoCgbDsuWJQAAAAAElFTkSuQmCC');
  width: 6px;
  background-repeat: no-repeat;
  background-size: contain;
  display: table-cell;
  vertical-align: middle;
  background-position: center;
}

td.more-time-button {
  display: table-cell;
  vertical-align: middle;
  padding-right: 4%;
  padding: 0.25% 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="accordion2" class="accordion" index="2">
  <div id="accordion-toggle" class="small-text-size accordion-toggle" index="2">
    <div> <b><span id="hours-title2">working hours:</span></b> </div>
    Tuesday
  </div>
  <div id="accordion-content2" class="accordion-content">
    <div class="small-text-size workTimeTitle deleteRow"> <b><span id="Span1">week's hours</span></b> </div>
    <div class="accordion-inner small-text-size">
      Thursday
    </div>
  </div>
  <div id="more-time2" class="very-small-text-size more-time" index="2" mode="Available" onclick="toggle(this.getAttribute('index'), this.getAttribute('mode'))">
    <table>
      <tr>
        <td id="arr-icon2" class="accordion_down"> </td>
        <td id="more-time-text2" class="more-time-button" index="2"> more hours </td>
      </tr>
    </table>
  </div>
  <div id="temp2"></div>
</div>

以及JsFiddle中的链接

展开后显示的文本是动态的:可以是 1 行或 6 行。使用css制作的动画，通过改变 最大高度:220px 或最大高度:0；

当我崩溃时，它需要时间才能真正崩溃，这是因为 max-height: 220px 并且只有 1 行。如果它是 6 行，它看起来会很好。

我尝试在 JS 中将 max-height 更改为 div 的实际高度(展开后)，方法是:elem.style.maxHeight = elem.offsetHeight + "px"; 但是它不起作用。

有什么建议为什么不起作用吗？

Answer 1

从 accordion-toggle 和 accordion-content-clicked 类中删除 transition(你真的不想延迟点击和切换，只有内容改变)。JS函数changeTexts()中的for..next延迟 Accordion 的折叠。