AJAX toggle – JavaScript, AJAX, jQuery – Fórum – Programujte.com

Zdravím, mám menší problém

mám tento kód
$(function(){
$('.toggle').show();
$('div.obsah-nav-zobrazit').toggle(function(){
$('.toggle').slideDown("slow");
$('#skryt').attr("src","img/icony/minus.gif" );
},function(){
$('.toggle').slideUp("slow");
$('#skryt').attr("src", "img/icony/plus.gif" );
});
});

a ted, pokaždé, když položku skryju, tak se změní ikona, jde o plus a mínus. Jen
mě trápí jediná věc a to ta, že bych potřeboval, aby se skrývaly jednotlivé
elementy, takto se skryjou všechny elementy.

Nevěděl by někdo, jak na to?

Děkuju

V tom prípade skrývaj jednotlivé elementy a nie celý div. Teda, neviem ako vyzerá HTML toho čo skrývaš tak viac menej tipujem podľa toho JS čo si sem dal. Ale ak by si sem kus HTML dal tak by to mohlo pomôcť.

Dobře, jinak ještě jednou AJAX skript je tady:

$(function(){

     $('.toggle').show();

     $('div.obsah-nav-zobrazit').toggle(function(){

     $('.toggle').slideDown("slow");

     $('.skryt').attr("src","img/icony/minus.gif" );

     },function(){

     $('.toggle').slideUp("slow");

     $('.skryt').attr("src", "img/icony/plus.gif" );

 });

 });

<div class="obsah-nabidka">

            <div class="obsah-nav">

                <div class="obsah-nav-nazev">Něco 1</div>

                <div class="obsah-nav-zobrazit"><img src="img/icony/minus.gif" class="skryt" /></div>

            </div>  

</div>

<div class="obsah-nabidka">

            <div class="obsah-nav">

                <div class="obsah-nav-nazev">Něco 2</div>

                <div class="obsah-nav-zobrazit"><img src="img/icony/minus.gif" class="skryt" /></div>

             </div>  

</div>

<div class="obsah-nabidka">

            <div class="obsah-nav">

                <div class="obsah-nav-nazev">Něco 2</div>

                <div class="obsah-nav-zobrazit"><img src="img/icony/minus.gif" class="skryt" /></div>

             </div>  

</div>

No tak jQuery moc nepoužívam - väčšinou mi stačí čistý JS. Ale povedal by som, že namiesto skrývania všetkých elementov pomocou tried by si mal použiť this. V jQuery je tuším vždy mapovaný na aktuálny element. Hentak pracuješ s celou kolekciou elementov v danej triede.

Přesně tak, použitím this to bude pracovat jen s "aktuálním" prvkem. Pak aby ses dostal dovnitř divu, budeš potřebovat metodu .children()

Už se v tom začínám ztrácet. Zkouším to a zkouším. Zatímco plus a mínus se mění jednotlivě pomocí this, tak nemůžu udělat, aby se ten element skryl, asi to dělám blbě. Dumám nad tím celý den, tak už se opět obracím sem. Moc se omlouvám, za tyto stupidní otázky, ale hrozně moc mi to pomůže

$(function(){

     $('.toggle').show();

     

     $('.skryt').toggle(function(){

     

     $(this).attr("src","img/icony/minus.gif" ).children('.toggle').slideDown("slow");  

     return false;

         

     },function(){



     $(this).attr("src", "img/icony/plus.gif" ).children('.toggle').slideUp("slow");

     return false;

               

 });

 });

A kde máš použitou tu classu .toggle? V HTML ji nikde nevidím...

A zrovna na .skryt nemůžeš aplikovat .children(), protože ten prvek je na nejnižší úrovni -> nemá children :)

Promin, zapomněl jsem to tam dopsat:

<div class="obsah-nabidka">

            <div class="obsah-nav">

                <div class="obsah-nav-nazev">Něco 1</div>

                <div class="obsah-nav-zobrazit"><img src="img/icony/minus.gif" class="skryt" /></div>

            </div>  

</div>

<div class="toggle">

<p>text</p>

</div>



<div class="obsah-nabidka">

            <div class="obsah-nav">

                <div class="obsah-nav-nazev">Něco 2</div>

                <div class="obsah-nav-zobrazit"><img src="img/icony/minus.gif" class="skryt" /></div>

             </div>  

</div>

<div class="toggle">

<p>text</p>

</div>



<div class="obsah-nabidka">

            <div class="obsah-nav">

                <div class="obsah-nav-nazev">Něco 3</div>

                <div class="obsah-nav-zobrazit"><img src="img/icony/minus.gif" class="skryt" /></div>

             </div>  

</div>

<div class="toggle">

<p>text</p>

</div>

No udělat každému bloku obalový div...nějak takhle:

<div class="wrapper">

	<div class="obsah-nabidka"> 

            <div class="obsah-nav"> 

                <div class="obsah-nav-nazev">Něco 2</div> 

                <div class="obsah-nav-zobrazit"><img src="img/icony/minus.gif" class="skryt" /></div> 

             </div>   

	</div> 

	<div class="toggle"> 

		<p>text</p> 

	</div>

</div>

$('div.obsah-nav-zobrazit).click(function() {

	$(this).attr('src','img/icony/minus.gif');

	$(this).parent().parent().parent().children('div.toggle:hidden').slideDown('fast');

});