为什么Javascript可折叠在IE中不起作用？

Question

我正在尝试使用Show All /隐藏所有其他选项来创建可折叠的JS。除了在IE中显示全部/隐藏所有按钮之外，我的代码似乎在所有浏览器中都能正常工作。我已经尝试了各种方法（尽管我不是JS的新手），但是IE却没有任何改变。有人可以帮忙吗？解决方案需要结合JS，HTML和CSS，因为这些是我可以在界面中添加的唯一选项。

  var coll = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    var content = this.nextElementSibling;
    if (content.style.display === "table-row") {
      content.style.display = "none";
      this.firstElementChild.firstChild.style.transform = "rotate(-45deg)";
    } else {
      content.style.display = "table-row";
      this.firstElementChild.firstChild.style.transform = "rotate(45deg)";
    }
  });
} 

  function showexplanation() {
    document.querySelectorAll('.accordion-content').forEach(item => {
      item.style.display = "table-row";
    })
    document.querySelectorAll('.arrow-right').forEach(item => {
      item.style.transform = "rotate(45deg)";
    })
  }

function hideAll() {
  document.querySelectorAll('.accordion-content').forEach(item => {
    item.style.display = "none";
  })
  document.querySelectorAll('.arrow-right').forEach(item => {
    item.style.transform = "rotate(-45deg)";
  })
} 

.accordion {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.accordion td {
  padding: 15px;
}

.accordion td:nth-child(1) {
  min-width: 40px;
  text-align: center;
}

.accordion td:nth-child(2) {
  padding-left: 0px;
}

.accordion-content {
  padding: 25px;
  overflow: hidden;
  background-color: #f1f1f1;
  display: none;
}

.accordion-content td {
  padding: 15px;
}

.arrow-right {
  border: solid white;
  border-width: 0 1.5px 1.5px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  transition: all 200ms ease 0s;
}

<table style="max-width: 700px;" border="0" cellspacing="0">
  <tbody>
    <tr class="accordion">
      <td style="width: 1%"><i class="arrow-right"></i></td>
      <td>Item 1</td>
      <td style="text-align: right;">£1,800</td>
    </tr>
    <tr class="accordion-content">
      <td colspan="3">
        <p>Explanation 1</p>
      </td>
    </tr>

    <tr class="accordion">
      <td style="width: 1%"><i class="arrow-right"></i></td>
      <td>Item 3</td>
      <td style="text-align: right;">£1,750</td>
    </tr>
    <tr class="accordion-content">
      <td colspan="3">
        <p>Explanation 3</p>
      </td>
    </tr>
    <tr class="accordion">
      <td style="width: 1%"><i class="arrow-right"></i></td>
      <td>Item 3</td>
      <td style="text-align: right;">£1,750</td>
    </tr>
    <tr class="accordion-content">
      <td colspan="3">
        <p>Explanation 3</p>
      </td>
    </tr>
  </tbody>
</table>
<p style="margin-top: 20px;">
  <button onclick="showexplanation()">Show all</button>
</p>
<p style="margin-top: 20px;" id="solution">
  <button onclick="hideAll()">Hide all</button>
</p>

Answer 1

就像已经提到的评论一样，IE具有可怕的ES6 / html5支持。解决方案可能是使用babel之类的polyfills。

另一个解决方案是仅使用IE支持的功能，您可以使用caniuse检查是否支持该功能>

最后，您可以放弃对IE的支持，因为IE为hardly used anymore，但这当然取决于您的目标受众。