jquery slide up/down

Sk!ppy · 14. mai 2010

Hei,

Har laget en slide up/down med jquery.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>TIHI</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<link href="/style.css" type="text/css" rel="stylesheet" media="screen" />
	<script>
	$(document).ready(function(){
		$(".btn-slide").click(function(){
			$("#panel").slideToggle("slow");
			$(this).toggleClass("active");
		});
	});
	</script>
<style>
.panel	{
display:none;
}
</style>
</head>
<body>
	<div class="cont">
		<div class="invite">
		<a class="btn-slide">ZUWD3whheBKTzhMt</a>
		<div id="panel" class="panel">Use</p>
		</div>

		<div class="invite">
		<a class="btn-slide">ZUWD3whheBKTzhMt</a>
		<div id="panel" class="panel">Use</p>
		</div>

		<div class="invite">
		<a class="btn-slide">ZUWD3whheBKTzhMt</a>
		<div id="panel" class="panel">Use</p>
		</div>

		<div class="invite">
		<a class="btn-slide">ZUWD3whheBKTzhMt</a>
		<div id="panel" class="panel">Use</p>
		</div>

		<div class="invite">
		<a class="btn-slide">ZUWD3whheBKTzhMt</a>
		<div id="panel" class="panel">Use</p>
		</div>

		<div class="invite">
		<a class="btn-slide">ZUWD3whheBKTzhMt</a>
		<div id="panel" class="panel">Use</p>
		</div>
	</div>
</body>
</html>

Men på denne koden, vil kun den første slide, uavhengig av hvem jeg trykker. Tenkte at jeg kanskje måtte ha noe #id på #panel, men how?

Takk!

dabear · 15. mai 2010

ID er unik, du kan ikke ha to IDer som er like i et dokument. Når du likevel har det, vil jquery kun ha mulighet til å hente ut den første av alle elementene som har denne IDen.

Løsninga er å ikke bruke ID, men hente ut elementet etter knappen som trykkes. Ved å plassere nøkkelordet this i et jquery-objekt, kan du så hente ut panelet med .next()

Se eksemplene her: http://api.jquery.com/next/

Sk!ppy · 15. mai 2010

jeg ser på en måte ikke helt hvordan dette skal hjelpe meg,

kunne du gitt eksempler?

dabear · 16. mai 2010

Hei. Hva var det du ikke forstod?

**Runar** · 16. mai 2010

jeg ser på en måte ikke helt hvordan dette skal hjelpe meg,

kunne du gitt eksempler?

Lag deg en kopp kaffe (eller annen varm drikke)
Sett deg godt ned i den beste stolen du har tilgjengelig
Len deg tilbake, lukk øynene og smak på den vidunderlige kaffen (eller annen varm drikke) du har laget deg
Les dabears post tre ganger, og tenk nøye over hvert ord du leser
Ta en slurk av kaffen og tenk på noe fint
Trykk på linken dabear postet, og les artikkelen helt til du forstår innholdet
Gå tilbake til punkt 1

Sk!ppy · 16. mai 2010

Jeg forstod det, men problemet er vel heller at jeg ser ikke hvordan det kan hjelpe meg.

.next() er laget for å velge div, li, p e.l ETTER en spesefikk class e.l.

Det jeg vil gjøre er å ha dropdown på ALLE, ikke kun en bestemt. See my problem?

dabear · 16. mai 2010

Så du mener at et trykk på en vilkårlig ".btn-slide" skal trigge slidedown eller slideup på alle "paneler"?

Isåfall, her er framgangsmåten:

1.)Lagre alle paneler (ikke bruk ID) i en global variabel. ("div.panel")

2.) Ved trykk på .btn-slide, slideup alle disse.

3.) Slidedown kun det panelet som befinner seg rett etter den knappen som trykkes. Med $(this).next() i clickhandelen din, finner du dette panelet.

jquery ui har forøvrig en widget kalt accordion som muligens gjør det du ønsker.

Endret 16. mai 2010 av dabear

Sk!ppy · 16. mai 2010

tror at 3. Kan gjør det jeg ønsker.

Hvordan mener du jeg skal plassere denne? Har prøvd litt forskjellige her nå.

	<script>
	$(this).next(){
	$(document).ready(function(){
		$(".btn-slide").click(function(next()){
			$("#panel").slideToggle("slow");
			$(this).toggleClass("active");
		});
	});
	});
	</script>

Dette er den siste jeg prøvde.

dabear · 16. mai 2010

Hei.

Den $(this).next() biten henter det elementet som befinner seg under det nåværende, da this refererer til det nåværende. Denne koden må inn i klikk-handleren, ikke utafor.

Du har også feil i syntaxen der, $(this).next(){ ... } slik som du har det nå gir ingen mening.

I tillegg har du ignorert det jeg skreiv om IDer. Du kan kun ha én id lik "panel" per dokument. (Hint her: du skal ikke bruke denne IDen heller, ettersom du skal finne et element relativt til et annet, med bruk av .next() )

Jeg kan ikke hjelpe deg videre, uten å servere deg koden på sølvfat. Det lærer du ingenting av. Du får nesten lese deg opp på hvordan du skal skrive korrekt javascript.

Du får nesten kjøre koden din igjennom validatoren på denne nettsida: http://jslint.com/

Da finner du fort feil. Anbefaler også en teksteditor som fargelegger koden din, så du lettere finner feil. Notepad2, komodo edit pluss mange flere gjør det for deg.

Endret 16. mai 2010 av dabear

Sk!ppy · 16. mai 2010

	<script>
	$(document).ready(function(){
		$(".btn-slide").click(function(){
			$(".panel").slideToggle("slow");
			$(this).toggleClass("active");
		});
	});
	</script>

Der ble det delvis riktig Nå skal jeg lese litt, og se om jeg klarer å plassere .next(); riktig

Sk!ppy · 16. mai 2010

	<script>
	$(document).ready(function(){
		$(".btn-slide").click(function(){
			$(this).toggleClass("active").next().slideToggle("slow");
			return false;
		});
	});
	</script>

Logg inn

jquery slide up/down

Anbefalte innlegg

Sk!ppy

Lenke til kommentar

Videoannonse

dabear

Lenke til kommentar

Sk!ppy

Lenke til kommentar

dabear

Lenke til kommentar

Runar

Lenke til kommentar

Sk!ppy

Lenke til kommentar

dabear

Lenke til kommentar

Sk!ppy

Lenke til kommentar

dabear

Lenke til kommentar

Sk!ppy

Lenke til kommentar

Sk!ppy

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer