最大高度不起作用

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制作的动画，方法是更改​​max-height：220px或max-height：0;

当我合拢时，它需要一段时间才能真正合拢，这是因为max-height: 220px并且只有1行。 如果是6行，它将看起来不错。

我在JS中尝试通过编写以下elem.style.maxHeight = elem.offsetHeight + "px";将max-height更改为div的实际高度（扩展后）： elem.style.maxHeight = elem.offsetHeight + "px"; 但这不起作用。

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

Answer 1

从类accordion-toggle和accordion-content-clicked删除transition （您确实不想延迟单击和切换，仅更改内容）。 该for..next在JS功能changeTexts()延迟手风琴的崩溃。