Gå til innhold

jquery slide up/down

Sk!ppy

Anbefalte innlegg

Sk!ppy

Sk!ppy

Skrevet
Skrevet

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! :)

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
dabear

dabear

Skrevet
Skrevet

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/

  • Liker 1
Lenke til kommentar
Runar

Runar

Skrevet
Skrevet

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

kunne du gitt eksempler?

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

  • Liker 1
Lenke til kommentar
Sk!ppy

Sk!ppy

Skrevet
  • Forfatter
Skrevet

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?

Lenke til kommentar
dabear

dabear

Skrevet
Skrevet (endret)

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 av dabear
Lenke til kommentar
Sk!ppy

Sk!ppy

Skrevet
  • Forfatter
Skrevet

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.

Lenke til kommentar
dabear

dabear

Skrevet
Skrevet (endret)

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 av dabear
Lenke til kommentar
Sk!ppy

Sk!ppy

Skrevet
  • Forfatter
Skrevet 

	<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 :)

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...