如何在 js 中执行代码，当单击"open"文本时，不仅可以打开栏，还可以将文本更改为 "close" 以再次关闭它？

Question

如何在js中执行代码，当单击"打开"文本时，不仅可以打开栏，还可以将文本更改为"关闭"以再次关闭它？

这是我的代码：

<div class="main">
<div id="close">
Close</div>
<h1>Heading 1</h1>
<h1>Heading 1</h1>
<h1>Heading 1</h1>
<h1>Heading 1</h1>
<h1>Heading 1</h1>
<h1>Heading 1</h1>
<h1>Heading 1</h1>
<h1>Heading 1</h1>
<h1>Heading 1</h1>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('#close').onclick = function () {
document.querySelector('.main').hidden = true;
document.querySelector('main').innerHTML = open;
}

});
</script>

Answer 1

这可以通过多种方式完成，您可以使用以下简单脚本并修改样式显示属性 -

<div class="main">
<div id="box" style="display: none;">
<div id="close">Close</div>
<h1>Heading 1</h1>
<h1>Heading 1</h1>
<h1>Heading 1</h1>
<h1>Heading 1</h1>
<h1>Heading 1</h1>
<h1>Heading 1</h1>
<h1>Heading 1</h1>
<h1>Heading 1</h1>
<h1>Heading 1</h1>
</div>
<div id="open" >Open</div>
</div>

和脚本为：

<script>
document.getElementById("open").addEventListener("click", openFunc);
document.getElementById("close").addEventListener("click", closeFunc);

function openFunc() {
document.getElementById("box").style.display = 'block';
document.getElementById("open").style.display = 'none';
}
function closeFunc() {
document.getElementById("box").style.display = 'none';
document.getElementById("open").style.display = 'block';
}
</script>