我尝试在单击导航栏中的按钮后显示侧边栏。我做了JS功能，但是点击后没有任何显示，请帮忙

Question

我尝试在单击导航栏中的按钮后显示侧边栏。我已经做了JS功能，但是点击导航栏按钮后没有任何显示，请帮忙。

这是我的html和css代码片段，请建议我如何做到这一点，单击后打开侧边栏后，我还希望在同一位置出现一个按钮来关闭侧边栏。我无法找出任何 css 代码来做同样的事情。

`

<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;

        }

        .navbar {

            display: flex;

            background: #000000;

            padding: 25px;

            justify-content: space-between;

        }

        .navbar > a > img {

            width: 300px;

        }

        .navbar > .links-sidebar > a {

            color: #ffffff;

            font-size: 16px;

            text-decoration: 1.2px underline #ff8c00;

        }

        .navbar > .links-sidebar > a:hover {

            text-decoration-thickness: 3px;

        }

    </style>

</head>

<body>

    <div class="navbar">

        <a href="#logo"><img src="https://i.ibb.co/3m7Xr45/event-apart-removebg-preview.png" width="100"></a>

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

        <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() {

            document.getElementsByClassName("links-sidebar").style.width = "100%";

            document.getElementsByClassName("links-sidebar").style.display = "flex";

        }

    </script>

</body>

`

这是我的代码的输出，右侧的导航栏按钮。

Answer 1

getElementsByClassName

返回元素s的数组。
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

如果您只有一个或想选择第一个，只需在其前面添加

[0]

即可。

（这只是一个简单的 JavaScript 错误，可以通过查看浏览器控制台来修复。）

样品：

function btn_open() {

  document.getElementsByClassName("links-sidebar")[0].style.width = "100%";

  document.getElementsByClassName("links-sidebar")[0].style.display = "flex";

}

.navbar>.links-sidebar {
  display: none;
}

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

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

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

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

<div class="navbar">

  <a href="#logo"><img src="https://i.ibb.co/3m7Xr45/event-apart-removebg-preview.png" width="100"></a>

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

  <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>

我尝试在单击导航栏中的按钮后显示侧边栏。我做了JS功能，但是点击后没有任何显示，请帮忙

问题描述投票：0回答：1

1个回答

最新问题

我尝试在单击导航栏中的按钮后显示侧边栏。我做了JS功能，但是点击后没有任何显示，请帮忙

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1