Question

我有以下代码：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

JsFiddle

中的链接

展开后显示的文字是动态的：可以是1行或6行。使用css制作的动画，通过更改 max-height：220px或max-height：0;

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

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

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

Answer 1

从类h2和transition中删除accordion-toggle（您实际上不希望延迟点击和切换，只会更改内容更改）。 JS函数accordion-content-clicked中的for..next延迟了手风琴的崩溃。

最大高度不起作用

1 个答案: