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

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

我试图在单击导航栏中的按钮后显示侧边栏。我已经制作了 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>

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

html css flexbox navbar sidebar
2个回答
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>

1
投票

问题在于您的 

getElementsByClassName
函数返回类似数组的对象，您需要以类似数组的方式使用它。

此外，我还设置了 

display:block
而不是 
flex
来使侧边栏可见。

询问如何添加关闭按钮；一种方法是您可以在 

HTML
中创建一个新按钮，并使用相同的 
btn_open
功能来切换侧边栏的显示。显然，您可以根据自己的需要来使用它。

以下是以上几点的实现：

<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;
    }
    .close-btn {
        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>
        <button class="side-btn-open" type="button" onclick="btn_toggle()"><i class="fas"></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>
        <button class="close-btn" type="button" onclick="btn_toggle()"><i class="fas"></i></button>
    </div>
    <script type="text/javascript" charset="utf-8">
        function btn_toggle() {
            var sidebar = document.getElementsByClassName("links-sidebar")[0];
            var closeBtn = document.getElementsByClassName("close-btn")[0];
            if (sidebar.style.display === "block") {
                sidebar.style.display = "none";
                closeBtn.style.display = "none";
            } else {
                sidebar.style.display = "block";
                closeBtn.style.display = "inline-block";
            }
        }
    </script>
</body>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.