我如何在js中执行代码，当单击“打开”文本时，不仅会打开条形，还会将文本更改为“关闭”以再次将其关闭？

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

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