Question

我正在尝试显示可以打开和关闭的侧边栏，在顶部有一个导航栏，其中包含一个带有id =“ toggle”标记的标签，为此我添加了一个eventListener（等待HTML进入在运行javascript代码之前加载）和应该折叠/展开侧面菜单的相应功能。但是，当我尝试运行代码时，什么也没有发生。任何帮助都会很棒！

这是我的HTML：

<html>
    <head>
        <title>Home</title>
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css') }}"/>
        <script type="text/javascript" src="{{ url_for('static', filename='index.js') }}"></script>
    </head>
    <body>

        <!-- navbar -->
        <div id="navbar">
          <a href="" id="toggle">&#9776; Menu</a>
          <a href="">Forget me</a>
        </div>

        <!-- sidebar -->
        <div id="mySidenav" class="sidenav">
          <a href="">About</a>
          {% for room in chatroom %}
          <a href="">{{ room }}</a>
          {% endfor %}
        </div>
    <body>
</html>

还有js文件，该文件位于“静态”文件夹中：

document.addEventListener("DOMContentLoaded", function() {

  document.getElementById("toggle").onclick = function() {

    var sidebar = document.getElementById("mySidenav");

    if (sidebar.style.width === "250px") {
      sidebar.style.width = "0";

    } else {
      sidebar.style.width = "250px";
    }
  };
});

Answer 1

我看到两个问题，没有测试任何代码：

您的结束正文标签必须为</body>，并且；
toggle链接将离开页面，您需要防止这种情况。您可以通过将toggle元素更改为button type="button"或在您的点击处理程序Javascript中添加preventDefault()来实现。

getElementById（...）。onclick没有响应

1 个答案: