Tomé este código de w3school donde crea una barra de navegación receptiva. la barra de navegación agrega ícono, agrega funcionalidad para ícono y cambia la visualización del menú. en el código js, la navegación se asigna al elemento div y la navegación tiene 2 casos, si tiene la clase topnav o si no (no tiene la clase topnav). en html, nav tiene class top nav, por lo que no entiendo para qué más sirve el caso. Se necesita el caso else porque cuando elimino la funcionalidad del caso else también cambia. por favor alguien explique
body { margin: 0; font-family: Arial, Helvetica, sans-serif; } .topnav { overflow: hidden; background-color: #333; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a:hover { background-color: #ddd; color: black; } /* .topnav a.active { background-color: #04aa6d; color: white; } */ .topnav .icon { display: none; } @media screen and (max-width: 600px) { /* only display home */ .topnav a:not(:first-child) { display: none; } /* display icon dropdown */ .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 600px) { .topnav.responsive { position: relative; } .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="topnav" id="myTopnav"> <a href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> <a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> </div> <script> function myFunction() { //objecthtmldivelement var nav = document.getElementById("myTopnav"); // alert(nav); if (nav.className === "topnav") { //class responsive position icon to top right //and display a as block text float left nav.className += " responsive"; } else { nav.className = "topnav"; } } </script> </body> </html>esta función es para /* Alternar entre agregar y quitar la clase "sensible" a topnav cuando el usuario hace clic en el icono */
otra parte es para eliminar la clase "sensible" para que permanezca en la parte superior como predeterminado que era
nav.className === "topnav" es una declaración de coincidencia exacta, por lo que si hace clic en el icono, nav.className se convierte en 'topnav responsive' , que no coincide exactamente con 'topnav' (en otras palabras, 'topnav' === 'topnav responsive' es false ), esta es la funcionalidad que el bloque else quiere manejar.