| Autor | Zpráva | ||
|---|---|---|---|
| JS_blb Profil * |
#1 · Zasláno: Předevčírem, 20:16:48
Zdravím zdejší znalce! V JS jsem totálně blbý, tak prosím o radu, třeba bude snadná?
Na skrývání menu v mobilním rozlišení používám http://jecas.cz/prepinani-trid - funguje skvěle, jen mi chybí funkcionalita, aby při kliknutí mimo menu se dotyčné zavřelo? Našel jsem jedno více řešení, ale většinu se mi nedaří jako totálnímu JS laikovi implementovat, navíc tam nechci knihovny JQuery (nebo jak se to...). Jediné, co je dostatečně prosté, aby mi to fungovalo je tohle: <script type="text/javascript">
(function () {
"use strict";
var hiddenItems = document.getElementsByClassName('hidden'), hidden;
document.addEventListener('click', function (e) {
for (var i = 0; hidden = hiddenItems[i]; i++) {
if (!hidden.contains(e.target) && hidden.style.display != 'none')
hidden.style.display = 'none';
}
if (e.target.getAttribute('data-toggle')) {
var toggle = document.querySelector(e.target.getAttribute('data-toggle'));
toggle.style.display = toggle.style.display == 'none' ? 'block' : 'none';
}
}, false);
})();
</script>
<a href="javascript:void(0)" data-toggle="#hidden1">Toggle Hidden Div</a>
<div class="hidden" id="hidden1" style="display: none;" data-hidden="true">This content is normally hidden</div>Jenomže to zase neskryje menu, když kliknu přímo na tlačítko/odkaz, kterým jsem ho vyvolal, což je trochu matoucí, dle mého... RESUMÉ: nešla by obě řešení zkombinovat nějak tak, aby výsledkem bylo: při kliknutí na tlačítko se zobrazí menu, při opětovném kliknutí na tlačítko, či kamkoliv jinam mimo, se menu skryje? Vypadá to primitivně, ale pro mě je to neřešitelný koán :-) |
||
| Keeehi Profil |
#2 · Zasláno: Předevčírem, 23:15:37
JS_blb:
Jako základ dobrý, i když pro tvůj problém asi zbytečně složité. Nicméně těžko ti můžeme poradit jak to upravit, když nevíme jak vypadá tvoje stránka. Chtělo by to živou ukázku. |
||
| JS_blb Profil * |
#3 · Zasláno: Včera, 00:13:00
Keeehi:
No ale já to mám prostě jak to leží a běží - tak tedy zde: Živá ukázka (místo toho "This content is normally hidden" mám pochopitelně to menu...) Vše - jak vidno - normálně funguje, jediné, co bych navíc potřeboval, aby se to skrylo i když podruhé kliknu na to tlačítko... A jestli to může být i jednodužší kód? No tak super, sem s ním! |
||
| Keeehi Profil |
JS_blb:
Jako pokud ti jde konkrétně o tuhle ukázku tak se do dá jednoduše zapsat takto. Ovšem nejsem si jistý, že když to vezmeš a přímo to zkopíruješ do nějakého projektu, tak to bude fungovat. Je to dělané přímo na míru tomuto jednoduchému příkladu. Těch možností implementace je samozřejmě spousta. Tuto jsem zvolil jelikož by z ní mělo být celkem jednoduše vidět co se tam kde dělá. |
||
| JS_blb Profil * |
#5 · Zasláno: Včera, 16:11:31
Keeehi:
Vyzkouším zejtra, ale vypadá to jak jsem potřeboval! Tisíceré díky!!! ("Projekt" bude na flash/CD, takže proto jej nemám online.) |
||
| breeta Profil |
Co tohle, nestačí?
Živá ukázka const hidden = document.querySelector('.hidden')
document.addEventListener('click', (e)=> {
if(hidden.style.display === 'none' && e.target.id === 'menu') {
hidden.style.display = 'block'
} else {
hidden.style.display = 'none'
}
}) |
||
| Keeehi Profil |
#7 · Zasláno: Včera, 18:38:34
breeta:
Pokud se skrývá jen jeden element tak určitě. Pro více elementů by se tam musel přidat cyklus na jejich skrytí. Což je ale víceméně drobnost. |
||
| breeta Profil |
#8 · Zasláno: Včera, 20:26:14
Keeehi:
Ano dát querySelectorAll a forEach .... |
0