Autor Zpráva
hugo123
Profil *
Ahojte,

ako sa prosim vas vola take, ze mam vela nadpisov a ked nanho kliknem, tak sa mi vysunie dalsi obsah?
A naopak, ked opat kliknem na vysunuty box, tak sa zabali.

Existuju nejake existujuce free riesenia?

Dakujem velmi pekne.
Str4wberry
Profil
Myslíš něco takového?
hugo123
Profil *
Str4wberry:
presne take ;-)))) ty si sikovny, to si kvoli mne spravil?

pozeram ze to je cisty JS, dokonca bez jquery :)
Str4wberry
Profil
Kvůli tobě ne. :–) Už je to staršího data.
joe
Profil
Funkční to sice je, ale programátorksy to není dobře.

1. Vytváření stálé anonymní funkce pro kliknutí
2. V případě, že rozevřený má být jen jeden blok, pak stačí ukládat jen ten otevřený a neprojíždět všechny.
3. Místo nastavování celé třídy se hodí funkce jako addClass a removeClass
Str4wberry
Profil
Ad 1) A čemu to vadí?
Ad 2) Nešlo by výchozí blok rozbalit přidáním třídy do HTML. Musel by se tedy předat parametr, který blok má JS rozbalit => musel by se tedy vymyslet další identifikátor pro najití a navíc by to způsobilo hrozbu probliknutí. Nejprve by byl blok vidět, po přidání třídy js by zmizel a po initu by se zase zobrazil.
Ad 3) Nemyslím si, že by to něco zlepšilo.
_es
Profil
Str4wberry:
Ad 1) A čemu to vadí?
Možno myslel priradenie v cykle objekt.onclick=názovFunkcie; lebo objekt.onclick=function(){...}; vyrába nový objekt funkcie. Ušetrila by sa tým nejaká pamäť.
joe
Profil
Str4wberry:
1 - jak napsal _es, setkával jsem se tady s tím hodně, kdy mi to taky bylo vytýkáno (a od té doby se to tak snažím dělat) a zkrátka dobrým způsobem je, že se ta funkce jen předá a nevytvoří se znovu
2 - proč by nedal, ten který má být ve výchozím stavu rozevřen, bude mít třídu "show" (jinak nevím jestli jsi se někdy setkal s problikáváním při podobných řešení, já ne, pouze v případě, že se kód vykonává až v document ready). Navíc to bude efektivnější, protože se pole objektů bude procházet jen jednou a ne při každém kliknutí. Může se uchovávat pole rozevřených elementů (pokud jich má být více)
3 - zlepšílo, protože pokud se k tomu divu nastaví nějaká třída (úplně jiná, nesouvisející s touto funkcí), tak se bude přepisovat a bude to vést k neočekávaným stavům. Samozřejmě že tady žádný problém není, ale proč to nedělat tak, aby se ani v budoucnu neobjevil žádný problém
hugo123
Profil *
Str4wberry:
Myslíš něco takového?
A ako si to mam upravit, ze po kliknuti na nadpis sa NEZATVORI to otvorene?
ja chcem tak, ze ked kliknem na vsetky nadpisy, tak budu vsetky otvorene.

Vopred dakujem :)
joe
Profil
hugo123:
Zakomentuj řádek volání funkce clearAll();
Bubák
Profil
Nějak takto:
http://teststranek.kvalitne.cz/rozbalovaci-menu/
Str4wberry
Profil
Reakce na joa:
Ad 1) Podle mě je zase dobrým způsobem psát kód, aby byl dobře čitelný. Pro mě je nejčitelnější, jak jsem ho zapsal a otázka výkonu je v obou případech naprosto marginální.
Ad 2) Zbytečně složité. A výkonově opět zanedbatelné. Jinak ano, pokud bude mezi obsahem, co se má skrývat, a JS kódem, který ten obsah bude skrývat, něco zdržujícího, což může být cokoliv, tak se probliknutí projeví.
Ad 3) Zbytečně složité. A bude žrát hromady výkonu. :–)
joe
Profil
Str4wberry:
1 - možná, ale špatným způsobům se člověk hůř odnaučuje
2 - ok, osobně problikávání řeším voláním kódu hned za elementem co kde chci udělat
3 - v tomhle případě se to zesložití, ale odpadne některými takzvaný "wtf faktor" :-)

Já bych to napsal nějak takto. Tak jestli se někomu na tom něco nelíbí, sem s připomínkami :)
Kcko
Profil
joe:
Mě se to třeba nelíbí. Je to roztahané a dlouhé. Já bych zas použil jQuery a napsal bych to ve 3 řádcích. Též neshledávám na Str4wberry-ho ukázce nic závadného a všechny tebou zmíněné výkonnostní problémy jsou absolutně zanedbatelné.

PS. V tvém případě bych se nějak zabavil prací či jiným koníčkem než neustálým sjížděním diskusního fóra a hledáním problémů tam kde nejsou ;-).
joe
Profil
Kcko:
Já bych ale řekl, že tam problém je a myslím, že jsem to dobře argumentoval ;-) Pokud něco dělám, tak myslím na použitelnost a efektivnost. Ten kód samozřejmě může být jiný (i lepší), jen jsem přepisoval to, co Str4wberry dal k dispozici, tak jak mi to přišlo pod ruku. Samozřejmě by to mohlo vypadat taky takhle:

$("html").addClass("js");
$("#obal").on("click", "h2", function() {
    $(this).parent("div").toggleClass("show");
});

Ale i tento kód má své nevýhody.

všechny tebou zmíněné výkonnostní problémy jsou absolutně zanedbatelné
Až budeš používat tento způsob na jiný velikostní rozměr dat, tak se ozvi ;-)

PS. V tvém případě bych se nějak zabavil prací či jiným koníčkem než neustálým sjížděním diskusního fóra a hledáním problémů tam kde nejsou ;-).
Prosím o důkaz.

Já bych zas použil jQuery a napsal bych to ve 3 řádcích
A že jsi to nenapsal.
hugo123
Profil *
joe:
2
3
4
>
$("html").addClass("js");
$("#obal").on("click", "h2", function() {
$(this).parent("div").toggleClass("show");
});


das mi prosim ta k tomuto aj HTML kod, nech si to viem vyskusat?

velmi pekne dakujem.
joe
Profil
hugo123:
Kód je úplně stejný, jen se v tomto případě používá jQuery. Celý kód JavaScriptu

 $(function() { // zkratka pro $(document).ready(function() {... })

    $("html").addClass("js");
    $("#obal").on("click", "h2", function() {
        $(this).parent("div").toggleClass("show");
    });

 });

Nebo živá ukázka na jsFiddle
hugo123
Profil *
Nechapem preco to nie je takto:

$("#obal").on("click", "h2", function() {
    $(this).parent("div").toggleClass("show");
}); 


.obal div p {display: none}
.obal div.show p {display: block}
.obal h2 {cursor: pointer}
.obal div {background: #efefef}
.obal div h2 {background: #ddd}
.obal div.show h2 {background: #ccc} 

Nie je to krajsie?
Str4wberry
Profil
Je, ale před uživateli bez JavaScriptu bude obsah navždy schován.
hugo123
Profil *
Str4wberry:
Je, ale před uživateli bez JavaScriptu bude obsah navždy schován.
ahaaa, dakujem za vysvetlenie, tak to pred tym bolo naozaj rozumnejsie.

Otazka na vas odbornikov: oplati sa mysliet, na ludi bez zapnuteho JS?
Chamurappi
Profil
Reaguji na huga123:
Pokud je to tak triviální jako v tomto případě, tak je tvá otázka snad úplně zbytečná…

Nie je to krajsie?
Můžeš toho smazat ještě mnohem víc a skončíš u jednoho krátkého krásného nefunkčního řádku :-)
Mně se mnohem víc lídí kódy v [#2] a [#13]. Mají menší riziko, že se rozbijí v nových prohlížečích.


Reaguji na joa:
$("html").addClass("js");
Proč dáváš tento řádek do $(document).ready?
joe
Profil
Chamurappi:
Má být mimo (kvůli problikávání) - moje chyba, obvykle to řeším už v HTML (s nastavenou třídou nojs u tagu html) jako prvním skriptem
document.documentElement.className = document.documentElement.className.replace("nojs", "");
nebo pro detailisty
document.documentElement.className = document.documentElement.className.trim() == "nojs" ? null : document.documentElement.className.replace("nojs", "").trim();

Mají menší riziko, že se rozbijí v nových prohlížečích.
Sdělil bys nám to riziko, prosím?
Polki
Profil
Ahoj, nebude náhodou stačit například toto? :)
$("#obal").on("click", "h2", function() {
    $(this).next("div").toggle(500);
});

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

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