javascript - Accordion 关闭动画不起作用。它打开(有动画)和关闭(没有动画)

Question

我是 javascript 的新手，所以这可能是个愚蠢的问题。

我的打开动画效果很好，但关闭动画不起作用/触发。 它应该像反转动画一样简单，但这似乎不起作用。
我必须在这里遗漏一些东西。有更好的方法吗？
一整天都在想办法解决这个问题。

HTML

<div class="divTable">
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">
        <button type="button" id="id" onclick="btnDetails_Click('id')">
          <p id="id-ButtonText">Details &#9660;</p>
        </button>
      </div>
      <div class="divTableCell">
        <p>Name</p>
      </div>
      <div class="divTableCell">
        <p>Details</p>
      </div>
    </div>
    <div class="divTableFoot" style="display:none" id="id-DetailsPanel">
      <div class="divTableCell" style="display:flex; height:0; overflow:hidden" id="id-DetailsPanel2">
        <div style="margin-right:20px">
          <img style="height:400px" src="http://via.placeholder.com/200x400" />
        </div>
        <div style="width:auto">
          <p>Description</p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

/* DivTable.com */
.divTable {
  display: table;
  width: 100%;
}

.divTableRow {
  display: table-row;
}

.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
}

.divTableCell,
.divTableHead {
  border: 1px solid #999999;
  display: table-cell;
  padding: 3px 10px;
}

.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
  font-weight: bold;
}

.divTableFoot {
  width:100%;
}

.divTableBody {
  display: table-row-group;
}

JavaScript

function btnDetails_Click(id) {
  document.getElementById("id-DetailsPanel").style = "display:inherit";
  document.getElementById("id").setAttribute("onclick", "btnDismiss_Click('id')");
  document.getElementById("id-ButtonText").innerHTML = "Details ▲";
  expand(id)
}

function btnDismiss_Click(id) {
  contract(id)
  document.getElementById("id-ButtonText").innerHTML = "Details ▼";
  document.getElementById("id").setAttribute("onclick", "btnDetails_Click('id')");
  document.getElementById("id-DetailsPanel").style = "display:none";
}

function expand(id) {
  var detailsBox = document.getElementById("id-DetailsPanel2");
  var boxHeight = 0;

  var int = setInterval(animate, 8);

  function animate() {
    if (boxHeight == 425) {
      clearInterval(int);
    } else {
      boxHeight = boxHeight + 25;
      detailsBox.style.height = boxHeight + 'px';
    }
  }
}

function contract(id) {
  var detailsBox = document.getElementById("id-DetailsPanel2");
  var boxHeight = 425;

  var int = setInterval(animate, 8);

  function animate() {
    if (boxHeight == 0) {
      clearInterval(int);
    } else {
      boxHeight = boxHeight - 25;
      detailsBox.style.height = boxHeight + 'px';
    }
  }
}

这是 JSFiddle:https://jsfiddle.net/1zryo2Lp/

Answer 1

因为在 setInterval 有机会执行 document.getElementById("id-DetailsPanel").style = "display:none"; 之前发生了。一个简单的解决方法是在 clearInterval(int);

之后移动 display:none 行

function btnDetails_Click(id) {
  document.getElementById("id-DetailsPanel").style = "display:inherit";
  document.getElementById("id").setAttribute("onclick", "btnDismiss_Click('id')");
  document.getElementById("id-ButtonText").innerHTML = "Details ▲";
  expand(id)
}

function btnDismiss_Click(id) {
  contract(id)
  document.getElementById("id-ButtonText").innerHTML = "Details ▼";
  document.getElementById("id").setAttribute("onclick", "btnDetails_Click('id')");
  // document.getElementById("id-DetailsPanel").style = "display:none";
}

function expand(id) {
  var detailsBox = document.getElementById("id-DetailsPanel2");
  var boxHeight = 0;

  var int = setInterval(animate, 8);

  function animate() {
    if (boxHeight == 425) {
      clearInterval(int);
    } else {
      boxHeight = boxHeight + 25;
      detailsBox.style.height = boxHeight + 'px';
    }
  }
}

function contract(id) {
  var detailsBox = document.getElementById("id-DetailsPanel2");
  var boxHeight = 425;

  var int = setInterval(animate, 8);

  function animate() {
    if (boxHeight == 0) {
      clearInterval(int);
      document.getElementById("id-DetailsPanel").style = "display:none";
    } else {
      boxHeight = boxHeight - 25;
      detailsBox.style.height = boxHeight + 'px';
    }
  }
}

.divTable {
  display: table;
  width: 100%;
}

.divTableRow {
  display: table-row;
}

.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
}

.divTableCell,
.divTableHead {
  border: 1px solid #999999;
  display: table-cell;
  padding: 3px 10px;
}

.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
  font-weight: bold;
}

.divTableFoot {
  width:100%;
}

.divTableBody {
  display: table-row-group;
}

<div class="divTable">
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">
        <button type="button" id="id" onclick="btnDetails_Click('id')">
          <p id="id-ButtonText">Details &#9660;</p>
        </button>
      </div>
      <div class="divTableCell">
        <p>Name</p>
      </div>
      <div class="divTableCell">
        <p>Details</p>
      </div>
    </div>
    <div class="divTableFoot" style="display:none" id="id-DetailsPanel">
      <div class="divTableCell" style="display:flex; height:0; overflow:hidden" id="id-DetailsPanel2">
        <div style="margin-right:20px">
          <img style="height:400px" src="http://via.placeholder.com/200x400" />
        </div>
        <div style="width:auto">
          <p>Description</p>
        </div>
      </div>
    </div>
  </div>
</div>