点击Navbar按钮显示侧边栏无效果，求实现及关闭按钮CSS方案

一、点击无响应的核心原因及修复 #

原JS代码中document.getElementsByClassName("links-sidebar")返回的是元素集合（HTMLCollection），无法直接调用.style属性，必须通过索引获取单个目标元素（比如[0]）。

修改后的JS函数：

function btn_open() {
  const sidebar = document.getElementsByClassName("links-sidebar")[0];
  sidebar.style.display = "flex";
  // 切换按钮显示状态
  document.querySelector(".side-btn-open").style.display = "none";
  document.querySelector(".side-btn-close").style.display = "block";
}

function btn_close() {
  const sidebar = document.getElementsByClassName("links-sidebar")[0];
  sidebar.style.display = "none";
  // 切换回打开按钮
  document.querySelector(".side-btn-open").style.display = "block";
  document.querySelector(".side-btn-close").style.display = "none";
}

二、实现开闭按钮切换的CSS及HTML调整 #

1. HTML修改：在原有打开按钮旁添加关闭按钮

<button class="side-btn-open" type="button" onclick="btn_open()"><i class="fas">&#xf0c9;</i></button>
<button class="side-btn-close" type="button" onclick="btn_close()"><i class="fas">&#xf00d;</i></button>

2. CSS修改：默认隐藏关闭按钮，同时优化侧边栏布局

/* 默认隐藏关闭按钮 */
.side-btn-close {
  display: none;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

.side-btn-open {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

/* 侧边栏显示时的布局优化 */
.navbar > .links-sidebar {
  display: none;
  gap: 20px; /* 链接之间的间距 */
  align-items: center;
}

.navbar {
  display: flex;
  background: #000000;
  padding: 25px;
  justify-content: space-between;
  align-items: center; /* 让元素垂直居中 */
}

三、完整修改后的代码 #

<head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" crossorigin="anonymous" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css" media="all">
        .navbar > .links-sidebar {
            display: none;
            gap: 20px;
            align-items: center;
        }

        .navbar {
            display: flex;
            background: #000000;
            padding: 25px;
            justify-content: space-between;
            align-items: center;
        }

        .navbar > a > img {
            width: 100px;
        }

        .navbar > .links-sidebar > a {
            color: #ffffff;
            font-size: 16px;
            text-decoration: 1.2px underline #ff8c00;
        }

        .navbar > .links-sidebar > a:hover {
            text-decoration-thickness: 3px;
        }

        .side-btn-open, .side-btn-close {
            background: transparent;
            border: none;
            color: #fff;
            font-size: 20px;
            cursor: pointer;
        }

        .side-btn-close {
            display: none;
        }
    </style>
</head>
<body>
    <div class="navbar">
        <a href="#logo"><img src="https://i.ibb.co/3m7Xr45/event-apart-removebg-preview.png" width="100"></a>
        <div class="btn-group">
            <button class="side-btn-open" type="button" onclick="btn_open()"><i class="fas">&#xf0c9;</i></button>
            <button class="side-btn-close" type="button" onclick="btn_close()"><i class="fas">&#xf00d;</i></button>
        </div>
        <div class="links-sidebar">
            <a href="#speakers">Speakers</a>
            <a href="#findanevent">Find an Event</a>
            <a href="#whyattend">Why Attend?</a>
            <a href="#registration">Registration Info</a>
            <a href="#registernow">Register Now!</a>
            <a href="#news">News</a>
        </div>
    </div>

    <script type="text/javascript" charset="utf-8">
        function btn_open() {
            const sidebar = document.getElementsByClassName("links-sidebar")[0];
            sidebar.style.display = "flex";
            document.querySelector(".side-btn-open").style.display = "none";
            document.querySelector(".side-btn-close").style.display = "block";
        }

        function btn_close() {
            const sidebar = document.getElementsByClassName("links-sidebar")[0];
            sidebar.style.display = "none";
            document.querySelector(".side-btn-open").style.display = "block";
            document.querySelector(".side-btn-close").style.display = "none";
        }
    </script>
</body>

关键说明 #

• 通过getElementsByClassName("xxx")[0]获取单个元素，解决JS操作无效的问题
• 新增关闭按钮并通过CSS默认隐藏，点击时切换两个按钮的display属性实现切换效果
• 优化navbar的垂直居中布局，给侧边栏链接添加间距提升视觉体验

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