Autor Zpráva
simeon
Profil
jsbin.com/vihidebude/edit?html,css,js,output

Snažím sa vytvoriť navigáciu podobnú, aká je napríklad na Googli - teda, že pri kliknutí sa štvorček sa navigácia rozbalí a zmizne len pri kliknutí mimo novo zobrazenej navigácie, zatiaľ čo všetky odkazy na pôvodnej stránke sú klikateľné a kurzor myši sa pri prechode ponad text mení na textový (tzn. stránka nie je potiahnutá nejakým divom ako v mojej ukážke verzia 2). Viete mi poradiť, ako na to? Je to zrozumiteľné, o čo sa snažím?
simeon
Profil
Tak nakoniec som to vyriešil. Narazil som na www.w3schools.com/howto/howto_js_dropdown.asp. Tu som upravil tú druhú JS funkciu na
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn') && !event.target.matches('.dropdown-content') && !event.target.matches('.dropdown-content a')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
Chamurappi
Profil
Reaguji na simeona:
Tak nakoniec som to vyriešil.
Tvůj skript nefunguje ve starších prohlížečích.

Myslím, že by na celé zadání mělo stačit jedno přepínání třídy (tedy className, ne hůř podporovaný classList), zbytek bych nechal v režii CSS.
simeon
Profil
Chamurappi:
Dobre, ak je classList na tom zle s podporou, ako je na tom target.matches? Ten je pre to, čo chcem urobiť, kľúčový.
Kubo2
Profil
Metóda Element.matches() resp. Element.matchesSelector() je podporovaná približne nasledovne (podľa MDN): developer.mozilla.org/en-US/docs/Web/API/Element/matches#Browser_compatibility
Chamurappi
Profil
Reaguji na simeona:
ako je na tom target.matches?
Tuto metodu nepodporuje ani Explorer 11. Takže je to celé nepoužitelné.
Webu W3Schools se doporučuji vyhýbat, jeho autor je nebezpečně nekompetentní.

Ten je pre to, čo chcem urobiť, kľúčový.
Ani moc není. Zjistit, zda je target.className rovno nějaké hodnotě, je snadné.

Krom toho si skutečně myslím, že by stačil jeden onclick na společném rodiči tlačítka, který by přepínal třídu, pokud (event.target || event.srcElement) == this, při čemž při nastavení třídy by z elementu vylezl fixovaný :after, který překryje zbytek plochy (tím pádem kliky na tento zbytek jsou pořád kliky na ten element).

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: