Jquery not.(this)

8 svar · 1 622 visningar · startad av ramo_and 18 jan. 2011

ramo_andMedlem sedan nov. 2010214 inlägg

Frågan18 jan. 2011 14:04#1

Skall göra en enkel "accordion-meny" med jQuery och där jag vill att innehåll skall visas under respektive länk när man klickar på dem.

Html:

<div id="retailers">
<div class="retailers_section">
<p><a href="#">Land 1</a></p>
<ul>
<li><a href="#">Länk 1</a></li>
<li><a href="#">Länk 2</a></li>
</ul>
</div>
<div class="retailers_section">
<p><a href="#">Land 2</a></p>
<ul>
<li><a href="#">Länk 1</a></li>
<li><a href="#">Länk 2</a></li>
</ul>
</div>
<div class="retailers_section">
<p><a href="#">Land 3</a></p>
<ul>
<li><a href="#">Länk 1</a></li>
<li><a href="#">Länk 2</a></li>
</ul>
</div>

jQuery:

<script type="text/javascript">
$(function() {
  $('.retailers_section ul').hide();
  $('.retailers_section a').click(function() {
    $(this).parent('.retailers_section p').next('ul').slideDown('normal');
    $('.retailers_section p').next('ul').not(this).slideUp('slow');
  });
});
</script>

Det är ju nåt fel med .not(this) i min kod för nu "slidar" innehållet ner när man klickar på länken o sen direkt upp igen. Hur skall jag använda .not(this) så att det blir rätt?

voigtann1Medlem sedan juni 20019 519 inlägg

18 jan. 2011 14:38#2

hämta ut hela kollektionen och sen kör .not()

.next() hämtar nästa element ul element, och this kommer ju aldrig vara ett ul element då det är ett a-element.

ramo_andMedlem sedan nov. 2010214 inlägg

18 jan. 2011 15:03#3

Okej jag är inte riktigt med på hur du menar med hämta ut hela kollektionen först.. :S Är det nåt mer är .not() jag ska ändra på?

voigtann1Medlem sedan juni 20019 519 inlägg

18 jan. 2011 15:14#4

Hela koden känns som det kommer ge dig problem, du hämtar ut alla a-element, även "Länk 1, länk 2" osv, vilket jag gissar på att de skall skicka dig till en riktig sida?

$(function() {
	var
		retailSection = $('.retailers_section'),
		rsUl = retailSection.find('ul').hide(),
		rsA  = retailSection.find('p>a').click(function() {
			var ignore = $(this).parent().next().slideDown('normal');
			rsUl.not(ignore).slideUp('slow');
			return false;
		});
});

om du aldrig byter HTML struktur.

test: http://jsbin.com/obiqo/

ramo_andMedlem sedan nov. 2010214 inlägg

18 jan. 2011 15:34#5

Länkarna i varje <ul> skall gå till riktiga sidor ja, men de skall också vara lite text i varje <li>-element.

Jag har använt den här tutorialn:

http://www.youtube.com/watch?v=qBh_lMO_SDM

Jag fick göra om den lite så den skulle passa mig men de blev ju inte riktigt rätt..

Din lösning funka skitbra! En fråga bara, gör det något om jag har href="#" på länkarna inuti <p>-taggarna? dom ska ju inte gå nånstans egentligen utan bara visa innehållet under när man klickar.

voigtann1Medlem sedan juni 20019 519 inlägg

18 jan. 2011 16:17#6

nej, och det hade inte spelat någon roll, jag är sån som vill att länkar skall ta mig någonstans, men det är spelar ingen roll, den kan ta dig till google.com om det skall vara så, eftersom det kör en return false på click eventet som stoppar den att gå till vad den än står att den skall gå till.

ramo_andMedlem sedan nov. 2010214 inlägg

19 jan. 2011 10:17#7

Okej! :)

En sista fråga, om jag skall göra så att om jag t ex klickar på Land 1 en gång så visas innehållet och sen klickar jag på Land 1 igen så döljs innehållet med en slideUp, skall jag då köra en if-sats på det eller? Jag gjorde ett försök på det men det gick ju sådär...

voigtann1Medlem sedan juni 20019 519 inlägg

19 jan. 2011 10:21#8

byt ut slideDown till slideToggle...

ramo_andMedlem sedan nov. 2010214 inlägg

19 jan. 2011 11:06#9

Hehe ok! Tack tack! :)