Estoy tratando de mostrar una barra lateral que se puede activar y desactivar, tengo una barra de navegación en la parte superior que contiene una etiqueta con el ID = "TOGGLE" para el que agregué un evento Listener (que espera que el HTML se cargue antes de cargar Ejecución del código JavaScript) y una función correspondiente que debe colapsar / expandir el menú lateral. Sin embargo, cuando trato de ejecutar el código, no pasa nada. ¡Cualquier ayuda sería genial!

Aquí está mi 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>

Y el archivo JS, que está en la carpeta 'estática':

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";
    }
  };
});
-1
Will 30 jun. 2019 a las 01:38

1 respuesta

La mejor respuesta

Veo dos problemas sin probar ningún código:

  1. Su etiqueta de cuerpo de cierre debe ser </body>, y;
  2. El enlace toggle navegará lejos de la página, y deberá prevenir esto. Puede hacerlo cambiando el elemento toggle a un button type="button", o agregue preventDefault() en su handler de clic, JavaScript.
1
djnz 30 jun. 2019 a las 02:30