以下代码在Chrome中完美运行，但是在Internet Explorer（任何版本）中无法正确呈现。你能帮忙吗？所有按钮均不起作用，并且该表无法在IE中打开或关闭。
嗨 以下代码可在Chrome中完美运行，但是无法在Internet Explorer（任何版本）中正确呈现。你能帮忙吗？所有按钮均不起作用，并且该表无法在IE中打开或关闭。
(function () {
const headings = document.querySelectorAll('h2');
Array.prototype.forEach.call(headings, h => {
let btn = h.querySelector('button');
let target = h.nextElementSibling;
btn.onclick = () => {
let expanded = btn.getAttribute('aria-expanded') === 'true';
btn.setAttribute('aria-expanded', !expanded);
target.hidden = expanded;
}
});
})()<style>
body {
margin: 0 auto;
padding: 1em;
}
main {
border-width: 1px 0;
border-style: solid;
}
main h2 {
margin: 0;
}
main > div + h2 {
border-top: 1px solid;
}
h2 button {
all: inherit;
border: 0;
display: flex;
justify-content: space-between;
width: 100%;
padding: 0.5em 0;
}
button svg {
height: 1em;
margin-left: 0.5em;
}
[aria-expanded="true"] .vert {
display: none;
}
[aria-expanded] rect {
fill: currentColor;
}
</style> <main style="width:50%; margin:auto">
<h2>
<button aria-expanded="false">
<div style="font-size:15px"> Text Text Text Text Text Text, Text Text Text</div>
<svg aria-hidden="true" focusable="false" viewBox="0 0 10 10">
<rect class="vert" height="8" width="2" y="1" x="4" />
<rect height="2" width="8" y="4" x="1" />
</svg>
</button>
</h2>
<div hidden>
<li>Text Text Text Text Text Text, Text Text Text</li>
<li>Text Text Text Text Text Text, Text Text Text</li>
<li>Text Text Text Text Text Text, Text Text Text</li>
<li>Text Text Text Text Text Text, Text Text Text</li>
<li>Text Text Text Text Text Text, Text Text Text</li>
</div>
<h2>
<button aria-expanded="false">
<div style="font-size:15px"> How To Use </div>
<svg aria-hidden="true" focusable="false" viewBox="0 0 10 10">
<rect class="vert" height="8" width="2" y="1" x="4" />
<rect height="2" width="8" y="4" x="1" />
</svg>
</button>
</h2>
<div hidden>
<p>
Text Text Text Text Text Text, Text Text Text
<br />
<br />
<div style="font-size:15px; font-weight:bold"> Text Text Text Text Text Text, Text Text Text</div>
Text Text Text Text Text Text, Text Text Text
<br />
<br />
<div style="font-size:15px; font-weight:bold"> Text Text Text Text Text Text, Text Text Text</div>
Text Text Text Text Text Text, Text Text Text
<br />
<br />
<span style="font-weight:bold">Text Text Text Text Text Text, Text Text Text</span> Text Text Text Text Text Text, Text Text Text
<br />
<br />
<span style="font-weight:bold">Text Text Text Text Text Text, Text Text Text</span> Text Text Text Text Text Text, Text Text Text
<br />
<br />
<div style="font-size:15px; font-weight:bold"> Text Text Text Text Text Text, Text Text Text </div>
Text Text Text Text Text Text, Text Text Text
<br />
<br />
<div style="font-size:15px; font-weight:bold">Mix with Concealer or Contour</div>
Mix 1 - 3 drops of PureOne Elixir with your cream concealer/ contour prior to your make up application, then apply with either a beauty sponge or brush for a flawless and radiant skin finish. Tip: When using a liquid concealer/contour it is advised to only apply PureOne Elixir to your beauty sponge or brush.
<br />
<br />
<span style="font-weight:bold">Text Text Text Text Text Text, Text Text Text:</span> Text Text Text Text Text Text, Text Text Text
<br />
<br />
<span style="font-weight:bold">Text Text Text Text Text Text, Text Text Text</span>Text Text Text Text Text Text, Text Text Text
</p>
</div>
<h2>
<button aria-expanded="false">
<div style="font-size:15px"> Caution </div>
<svg aria-hidden="true" focusable="false" viewBox="0 0 10 10">
<rect class="vert" height="8" width="2" y="1" x="4" />
<rect height="2" width="8" y="4" x="1" />
</svg>
</button>
</h2>
<div hidden>
<p>
<li> Text Text Text Text Text Text Text Text.</li>
<li> Text Text Text Text Text Text, Text Text Text</li>
<li> Text Text Text Text Text Text, Text Text Text</li>
</p>
</div>
</main>