侧边栏弹出时Open按钮未隐藏的技术问题求助

要实现侧边栏打开时隐藏Open按钮、关闭时显示的效果，同时解决按钮随页面左移的问题，只需对代码做以下几处修改：

1. 修正HTML标签结构 #

先修复未闭合的<a>标签，避免页面结构异常：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="script.js"></script>
    <link href="style.css" rel="stylesheet">
    <title>IKC Website</title>
</head>
<body>
    <div id="main">
    <div class="backgroundImg">
    <span class="openNav" id="openNav" onclick="openNav()">&#9776; open</span>
    </div>
    <div id ="sideNav" class="sideNav">
        <a id='link' href="javascript:void(0)" class="closeButton" onclick="closeNav()">&times;</a>
        <a id='link' href="about.html">About</a>
        <a id='link' href="members.html">Members</a>
        <a id='link' href="services.html">Services</a>
        <a id='link' href="contactUs.html">Contact</a>
    </div>
    </div>
</body>
</html>

2. 调整CSS优化按钮层级 #

将Open按钮的z-index调高，确保它能正常被点击：

.openNav {
    font-size: 30px;
    cursor: pointer;
    position: relative;
    top: 100px;
    left: 100px;
    margin: 10px;
    z-index: 2; /* 调高层级，避免被背景图遮挡 */
    color: black;
}

3. 修改JavaScript控制按钮显示/隐藏 #

在openNav和closeNav函数中添加按钮的显示状态控制：

function openNav() {
    document.getElementById("sideNav").style.width = "350px";
    document.getElementById("main").style.marginLeft = "350px";
    // 隐藏Open按钮
    document.getElementById("openNav").style.display = "none";
}

function closeNav() {
    document.getElementById("sideNav").style.width = "0px";
    document.getElementById("main").style.marginLeft = "0px";
    // 显示Open按钮
    document.getElementById("openNav").style.display = "block";
}

可选：让按钮不随页面左移 #

如果希望按钮在侧边栏打开时不跟着页面左移，可以将按钮的定位改为fixed，脱离main容器的布局流：

.openNav {
    font-size: 30px;
    cursor: pointer;
    position: fixed; /* 改为固定定位 */
    top: 100px;
    left: 100px;
    margin: 10px;
    z-index: 2;
    color: black;
}

修改完成后，点击Open按钮打开侧边栏时，按钮会立即隐藏；关闭侧边栏后，按钮自动重新显示，完全符合需求。

内容的提问来源于stack exchange，提问作者Ethan