FINÁLNÍ VÝPRODEJ KREDITŮ na ITnetwork je tady. Využij poslední šanci a získej až 80 % extra kreditů ZDARMA na náš interaktivní e-learning. Zjisti více:
NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
Thomasitho
Člen
Avatar
Thomasitho:21.7.2020 10:18

Zdravím,

v HTML mám tri elementy CONTAINER, BUTTON, MENU. V JS je event listener, ktorý čaká na klik na BUTTON. Kliknutím na BUTTON sa MENU má buď otvoriť alebo zatvoriť.

Na začiatku element MENU má mať width = 0. Nerozumiem ale tomu, ak v CSS nastavím elementu MENU width na akúkoľvek hodnotu, program nefunguje. Ak width vymažem/zakomen­tujem všetko funguje.

HTML:

<div class="container">
  <div class="btn"></div>
  <div class="menu"></div>
</div>

SCSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  position: relative;
  background-color: yellow;
  width: 100vw;
  height: 100vh;

  .btn {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 100px;
    height: 100px;
    background-color: red;
  }

  .menu {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    //width: 0;
    height: 100vh;
    background-color: blue;
  }
}

.show-menu {
  width: 25vw;
}

JavaScript:

const btn = document.querySelector('.btn');
const menu = document.querySelector('.menu');

btn.addEventListener('click', e => {
  if(e.target.closest('.btn')) {
    menu.classList.toggle('show-menu');
  }
});

Zkusil jsem: google, ....

Chci docílit: Bol by som rád ak by mi niekto vedel vysvetliť prečo sa program správa tak ako sa správa alebo čo robím zle.

 
Odpovědět
21.7.2020 10:18
Avatar
Thomasitho
Člen
Avatar
Odpovídá na Thomasitho
Thomasitho:22.7.2020 7:56

Chybu som urobil v tom, že v CSS som použil zlý selector: .show-menu. Je treba použiť tento selector: .menu.show-menu. Teraz to už funguje tak ako má.

Pripájam opravený SCSS súbor:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  position: relative;
  background-color: yellow;
  width: 100vw;
  height: 100vh;

  .btn {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 100px;
    height: 100px;
    background-color: red;
  }

  .menu {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 0;
    height: 100vh;
    background-color: blue;
  }
}

.menu.show-menu {
  width: 25vw;
}
Akceptované řešení
+5 Zkušeností
Řešení problému
 
Nahoru Odpovědět
22.7.2020 7:56
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:22.7.2020 9:21

https://jsfiddle.net/25gu98ht/

  • Komentar v css je /* */
  • V uvedenem kodu mas tagy prazdne.
  • Fiddle tomu css a js kodu moc nerozumi, tak jsem to prepsal do stareho js a css a do css doplnil nejake veci. Myslim si, ale, ze ten kod mel fungovat i bez te upravy, cos udelal.

https://jsfiddle.net/25gu98ht/1/
https://jsfiddle.net/25gu98ht/2/
Podle mne, hlavni problem je, zes to nemel v container. Co je v container prebiji class bez toho.
.container .menu prebiji .show-menu
.container .menu neprebiji .container .show-menu
.container .menu neprebiji .show-menu {display:block !important;}

 
Nahoru Odpovědět
22.7.2020 9:21
Avatar
Thomasitho
Člen
Avatar
Odpovídá na Peter Mlich
Thomasitho:22.7.2020 17:41

Vďaka za odpoveď aj za tvoje riešenia.

  • áno, máš pravdu použil som komentár // lebo mi to VS Code zobral aj takto :D
  • do príkladu som dal čo najmenej kódu, aby bol čo najjednoduchší na študovanie tak som tam nedal ani text (asi som mal)
  • spúšťal som to u seba v Chrome aj na codepen.io ale nefungovalo mi to. V Chrome devtools som si všimol, že keď som klikol na element BUTTON, bola mu priradená trieda .show-menu ale width ostal pôvodný t.j.0.

Keď som si na stackoverflow prechádzal vlákna, ktoré sa týkali transition effektu a metódy toggle() tak mi došlo či nemám chybu v selektore.

Máš pravdu, problém by sa vyriešil aj vtedy keby som to v CSS vložil do .container.

 
Nahoru Odpovědět
22.7.2020 17:41
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.