| Autor | Zpráva | ||
|---|---|---|---|
| Tanaris Profil |
#1 · Zasláno: 30. 4. 2013, 08:19:22
Chci si na web dát výčet zakázek stylem "Název zakázky" a když na něj kliknu rozbalí se mi text s detaily a obrázkem. Hrál jsem si s javascriptem, ale nelíbilo se mi, že to není plynulé rozbalení proto jsem sáhl po jquery. Kód mi, ale dělá neplechu. Když dám pod sebe více odkazů můžu rozbalit a zabalit jen jeden. Navíc když najedu na stránku tak jsou všechy odkazy už rozbalené místo zabalené. Můžete mi poradit jak má script správně vypadat? Tady je část jquery
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active");
return false;
});
});
</script>a tady html <h3 class="slide"><a href="#" class="btn-slide">2012 - Azylový dům Přerov →</a></h3> <aside id="panel"> <p> Prováděná činnost </p> <li>lorem ipsum</li> <li>lorem ipsum</li> <li>lorem ipsum</li> <li>lorem ipsum</li> </ul> <img src="../pictures/partneri_a_vyznamni_zakaznici/partneri/liga na ochranu zvirat.png" alt="stanistrechy.png, 44kB" title="stanistrechy"> </aside> <h3 class="slide"><a href="#" class="btn-slide">2012 - Stadion sportu Zlín →</a></h3> <aside id="panel"> <p> Prováděná činnost </p> <li>lorem ipsum</li> <li>lorem ipsum</li> <li>lorem ipsum</li> <li>lorem ipsum</li> </ul> <img src="../pictures/partneri_a_vyznamni_zakaznici/partneri/erkilos.png" alt="liga na ochranu zvirat.png, 44kB" title="erkilos"> </aside> |
||
| Sir Tom Profil |
Tanaris:
<script type="text/javascript">
$(document).ready(function(){
$("#panel").css('display', 'none');
$(".btn-slide").click(function(){
$(this).find("#panel").slideToggle("slow");
$(this).toggleClass("active");
return false;
});
});
</script> |
||
| Tanaris Profil |
#3 · Zasláno: 30. 4. 2013, 08:39:57
Ted to nefunguje vůbec :-D
|
||
| honzaik Profil |
změň těm aside id na class. id se má používat jen pro jeden element, class pro více, jinak je to celkem to samé.
zde je funkční příklad kterej sem udělal, základní koncept tam je. musíš použít this, aby se to aktivovalo pouze na další "next()" element od toho h3/a $(document).ready(function(){
$(".panel").hide(0); // aby byly ty elementy skryty hned po načtení stránky, jde to udělat i přes css display:none myslim.
$(".slide").click(function(){
$(this).next(".panel").toggle(1000);
});
}); |
||
|
Časová prodleva: 11 let
|
|||
0