0
190
Visualizações¿Cómo eliminar el elemento de navegación en el cambio de tamaño de la ventana?
Puedo hacer que el objetivo desaparezca fácilmente, pero que el objetivo aparezca en la parte desplegable es complicado. He usado window.onresize y window.onload con las siguientes condiciones
if (window.innerWidth < 1190 && window.innerWidth > 1188) { var dt = document.createElement("dt"); dt.innerHTML = 'Target'; dt.className = '.target' dl.prepend(dt); } if (window.innerWidth > 1189 && window.innerWidth < 1191) { console.log('done') dt?.remove() }
·
Juan Pablo Isaza
2 Respostas
Responde à pergunta0
Si está de acuerdo con el uso de CSS para esto, entonces una manera realmente fácil de hacerlo sería usar consultas de medios.
@media only screen and (min-width: 1189px) and (max-width: 1191px) { .target { display: none; } }
·
Juan Pablo Isaza
Relatório
0
Tal vez puedas crear objetivos estáticos y administrar quién se ocultará usando clases:
<nav> <ul> <li> Home </li> <li> Item </li> <li id="target-main">Target</li> <li class="nav-more-container">More <ul class="nav-more-list"> <li id="target-more">Target</li> <li>Item</li> <li>Item 2</li> </ul> </li> </ul> </nav> .hidden { display: none; } window.addEventListener("resize", () => { const { innerWidth } = window; const targetMain = document.getElementById("target-main"); const targetMore = document.getElementById("target-more"); if (innerWidth < 1190) { targetMain.setAttribute("class", "hidden"); targetMore.setAttribute("class", ""); } else { targetMain.setAttribute("class", ""); targetMore.setAttribute("class", "hidden"); } })
·
Juan Pablo Isaza
Relatório
Responde à pergunta