Új hozzászólás Aktív témák

• Taci addikt

  #8613

  #8605 martonx

  2021-04-24 18:34:42

  Új Válasz

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  

  Taci

  addikt

  #8605 martonx

  #8605 martonx

  Az én javaslatom, ami szerintem A megoldás, még ha elsőre komplexnek is hathat a js-es barkácsmódszerekhez képest:

  Egyrészt, ha mindent jól csináltál, akkor css media query-ket használtál, azaz tisztán css-ben dől el, hogy ez a div block vagy flex (ezen kicsit elmosolyodtam, hiszen a flex pont erre való, hogy ne kelljen media query-ket se használni, de te tudod, hogy miért jó hol block, hol flex-ként használni, szóval nekem már eleve itt bűzlik valami ).

  A tisztán css-es megoldásból kiindulva, csak annyit kell tenned, hogy csinálsz egy css class-t, amit hívj mondjuk .hidden-nek, amiben egyetlen egy rule van: display: none !important;
  Alapból oldal betöltésnél ezen a div-en legyen rajta ez a hidden class. Ezzel elérve, hogy betöltéskor ez az elemed nem fog látszódni. Ha minden igaz, akkor ezt eddig is így csináltad, ha viszont nem, akkor máris nem hiába koptattam a billentyűzetet.

  És amikor gombnyomásra vissza akarod hozni láthatóvá, akkor elég lesz csak ezt a class-t leszedni róla

  document.getElementById("bazinga").addEventListener('click', event => {
  document.getElementById("walami").classList.remove('hidden'); // fejből írtam, nem biztos, hogy hibátlan...
  });

  és voilá, ekkor máris a tisztán css-ben, az adott szabályoknak megfelelő display lesz rá érvényes és így nem kell js-ben találgatni, hiszen a js nem erre való (függetlenül attól, hogy js-ben is meg lehet oldani). Separation of Concerns.

  Köszönöm, ezt sikeresen implementáltam én is, nagyon egyszerű (és pont ettől szép) megoldás.

Új hozzászólás Aktív témák