Hogyan tudnám megoldani?
válasza:Én így csinálnám meg:
A lényege, hogy egy lenyitos_linkek_csaladja nevű classt használok a nyitogatós "linkek" megjelölésére és ezeknek a linkeknek kell lennie egy data-mit-nyissak nevű attributuma, ami megmutatja cél div idjét. Szóval ha ez a kettő egyezik, akkor azt nyitogatja.
<!DOCTYPE html>
<html>
<head>
<style>
.rejtett { display: none; }
.szinte_link { cursor: pointer; }
</style>
<script src=" [link]
<script type="text/javascript">
$(".lenyitos_linkek_csaladja").live("click",function(){ // aminek a classa lenyitos_linkek_csaladja, annak a klikk eseményére felirtkozunk, bármikor is lesz ilyen elem a jövőben
var cel_id = $(this).attr('data-mit-nyissak'); // a link data-mit-nyissak attribútuma megmutatja mi a cél div azonosítója
if ( $("#"+cel_id).length ) // ez a sor ellenőrzi, hogy létezik e a cel_idjű elem
{
$("#"+cel_id).fadeToggle(1000); // fadeToggle, lehet slideToggle is, 1000 az előtűnés sebessége
}
});
</script>
</head>
<body>
<span class='szinte_link lenyitos_linkek_csaladja' data-mit-nyissak='engem_1'>Link</span> <br/>
<div id='engem_1' class='rejtett'>Tartalom, amit csak akkor látsz, ha a Link-re kattintasz ;)</div>
<br />
<br />
<span class='szinte_link lenyitos_linkek_csaladja' data-mit-nyissak='engem_2'>Link</span><br/>
<div id='engem_2' class='rejtett'>Tartalom, amit csak akkor látsz, ha a Link-re kattintasz ;)</div>
<br/>
<br/>
<span class='szinte_link lenyitos_linkek_csaladja' data-mit-nyissak='engem_3'>[Link egymas mellett]</span>
<span class='szinte_link lenyitos_linkek_csaladja' data-mit-nyissak='engem_4'>[Link bárhol lehet]</span>
<span class='szinte_link lenyitos_linkek_csaladja' data-mit-nyissak='engem_5'>[Link]</span>
<div id='engem_3' class='rejtett'>Tartalom, amit csak akkor látsz, ha a Link-re kattintasz ;)</div>
<div id='engem_4' class='rejtett'>Tartalom, amit csak akkor látsz, ha a Link-re kattintasz ;)</div>
<div id='engem_5' class='rejtett'>Tartalom, amit csak akkor látsz, ha a Link-re kattintasz ;)</div>
<span class='szinte_link lenyitos_linkek_csaladja' data-mit-nyissak='engem_1'>Lehet több link is egy divre</span>
</body>
</html>
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!