Tengo un problema al alternar entre mostrar: ninguno; & bloqueo de pantalla;
Aquí está el elemento que quiero alternar:
.dd-content #myLinks{ display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 16px; z-index: 1; }JS:
<script> function myFunction() { var x = document.getElementsById("myLinks"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } } </script>Llamando a esa función:
<a href="javascript:void(0);" class="icon" onclick="myFunction()">Link</a>Lo que sucede ahora es que el elemento se muestra como un bloque y el enlace no lo alternará...
¿Qué estoy haciendo mal?
violín: https://jsfiddle.net/kx37dcbv/
Hay dos problemas aquí:
getElementsById , en su lugar, debe llamar a getElementById . <section class="p-menu1"> <nav id="navbar" class="navigation" role="navigation"> <input id="toggle1" type="checkbox" /> <label class="hamburger1" for="toggle1"> <div class="top"></div> <div class="meat"></div> <div class="bottom"></div> </label> <nav class="menu1"> <div class="dd"> <a href="javascript:void(0);" class="icon" onclick="myFunction()">Link</a> <div class="dd-content"> <p>Hello World!</p> </div> </div> </nav> </nav> </section> Cuando ejecuto el violín y hago clic en su 'Enlace', aparece el error "<a class='gotoLine' href='#283:9'>283:9</a> Uncaught TypeError: Cannot read properties of null (reading 'style')" . Esto me dice que su llamada de función a getElementById no puede encontrar un elemento con esa ID.
Debe agregar un id="myLinks" a uno de sus elementos en su HTML. Tu Actualmente tienes:
.dd-content #myLinks{ display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 16px; z-index: 1; } pero esto solo define el estilo de esos elementos, por lo que para su div <div class="dd-content"> debe cambiar esto a <div class="dd-content" id="myLinks"> para que su para poder encontrar el elemento identificado por ese ID.