Märkligt jQuery problem

8 svar · 1 329 visningar · startad av ramo_and 27 apr. 2011

ramo_andMedlem sedan nov. 2010214 inlägg

Frågan27 apr. 2011 11:05#1

Hej!

Håller på med en typiskt vänsterställd artikelmeny till en webbshop där jag men jquery skall göra så när man klickar på en kategori så kommer det upp underkategorier under den.

För detta ser min jQuery ut såhär:

<script>

$('.articleMenu a').not('.articleMenuItemLevel2 a').attr('href','#');

$(function() {
  $('.articleMenu a').not('.articleMenuItemLevel3 a').click(function() {
	$(this).toggleClass('selected');
	$(this).next().slideToggle('fast');
  });
});

</script>

och min html:

<div class="object_vertical object_menu"><ul class="articleMenu articleMenuLevel0">
<li class="articleMenuItem articleMenuItemLevel0 selected" id="articleMenuItem866338"><a class="leftnavgroupselected" href="#" id="treenode866338">Länk</a><ul class="articleMenu articleMenuLevel1">
<li class="articleMenuItem articleMenuItemLevel1 " id="articleMenuItem884893"><a class="leftnavgroup" href="#" id="treenode884893">Länk</a></li>
<li class="articleMenuItem articleMenuItemLevel1 selected" id="articleMenuItem884894"><a class="leftnavgroupselected" href="#" id="treenode884894">Länk</a><ul class="articleMenu articleMenuLevel2">
<li class="articleMenuItem articleMenuItemLevel2 selected" id="articleMenuItem897726"><a class="leftnavgroupselected" href="/se/artgrp.php?id=20236&amp;grp=897726" id="treenode897726">Länk</a><ul class="articleMenu articleMenuLevel3">
<li class="articleMenuItem articleMenuItemLevel3 " id="articleMenuItem889806"><a class="leftnavgroup" href="/se/artgrp.php?id=20236&amp;grp=889806" id="treenode889806">Länk</a></li>
<li class="articleMenuItem articleMenuItemLevel3 " id="articleMenuItem890830"><a class="leftnavgroup" href="/se/artgrp.php?id=20236&amp;grp=890830" id="treenode890830">Länk</a></li>
<li class="articleMenuItem articleMenuItemLevel3 " id="articleMenuItem889807"><a class="leftnavgroup" href="/se/artgrp.php?id=20236&amp;grp=889807" id="treenode889807">Länk</a></li>
</ul>
</li>
</ul>
</li>
<li class="articleMenuItem articleMenuItemLevel1 " id="articleMenuItem884895"><a class="leftnavgroup" href="#" id="treenode884895">Länk</a><ul class="articleMenu articleMenuLevel2">
<li class="articleMenuItem articleMenuItemLevel2 " id="articleMenuItem890756"><a class="leftnavgroup" href="/se/artgrp.php?id=20236&amp;grp=890756" id="treenode890756"> Länk</a></li>
</ul>
</li>
</ul>
</li>
<li class="articleMenuItem articleMenuItemLevel0 " id="articleMenuItem866339"><a class="leftnavgroup" href="#" id="treenode866339">Länk</a><ul class="articleMenu articleMenuLevel1">
<li class="articleMenuItem articleMenuItemLevel1 " id="articleMenuItem885736"><a class="leftnavgroup" href="#" id="treenode885736">Länk</a></li>
</ul>
</li>
<li class="articleMenuItem articleMenuItemLevel0 " id="articleMenuItem866381"><a class="leftnavgroup" href="#" id="treenode866381">Länk</a><ul class="articleMenu articleMenuLevel1">
<li class="articleMenuItem articleMenuItemLevel1 " id="articleMenuItem885644"><a class="leftnavgroup" href="#" id="treenode885644">Länk</a><ul class="articleMenu articleMenuLevel2">
<li class="articleMenuItem articleMenuItemLevel2 " id="articleMenuItem889923"><a class="leftnavgroup" href="/se/artgrp.php?id=20236&amp;grp=889923" id="treenode889923">Länk</a></li>
</ul>
</li>
<li class="articleMenuItem articleMenuItemLevel1 " id="articleMenuItem885739"><a class="leftnavgroup" href="#" id="treenode885739">Länk</a></li>
<li class="articleMenuItem articleMenuItemLevel1 " id="articleMenuItem885740"><a class="leftnavgroup" href="#" id="treenode885740">Länk</a></li>
</ul>
</li>
<li class="articleMenuItem articleMenuItemLevel0 " id="articleMenuItem866383"><a class="leftnavgroup" href="#" id="treenode866383">Länk</a></li>
</ul>
</div>

Detta funkar, förutom när jag ändrar:

$('.articleMenu a').not('.articleMenuItemLevel2 a').attr('href','#');

till

$('.articleMenu a').not('.articleMenuItemLevel3 a').attr('href','#');

Då försvinner

<ul class="articleMenu articleMenuLevel3">
<li class="articleMenuItem articleMenuItemLevel3 " id="articleMenuItem889806"><a class="leftnavgroup" href="/se/artgrp.php?id=20236&amp;grp=889806" id="treenode889806">Länk</a></li>
<li class="articleMenuItem articleMenuItemLevel3 " id="articleMenuItem890830"><a class="leftnavgroup" href="/se/artgrp.php?id=20236&amp;grp=890830" id="treenode890830">Länk</a></li>
<li class="articleMenuItem articleMenuItemLevel3 " id="articleMenuItem889807"><a class="leftnavgroup" href="/se/artgrp.php?id=20236&amp;grp=889807" id="treenode889807">Länk</a></li>
</ul>

från html-strukturen ovan.

Detta är mycket märkligt tycker jag... Varför blir det så?

OBS! Jag kan inte ändra något i htmlstrukturen tyvärr (förutom det som går att göra med jQuery).

voigtann1Medlem sedan juni 20019 519 inlägg

27 apr. 2011 11:15#2

Du kan väl snälla strukturera koden, är sjukt tråkigt att ens försöka läsa dina HTML filer

Sen förstå jag inte varför du skall behöva krångla till det:

$(".articleMenu ul").hide();

$(".articleMenu a").click( function ( e ) {     // Find all a-elements in the Article Menu list/lists
    var subNode = $(this).parent().find(">ul"); // From the a-element go up to its parent and then try to find a ul as a direct child of the parent node
    if(subNode.length>0) {                      // If you finda the list, toggle show it and return false (preventing the default action of the a-element
        subNode.toggle();
        return false;
    }
});

(förklarat vad koden gör)

( test http://jsbin.com/aniyi5/3/ )

Är väl det du är ute efter?

Varför sätter du alla länkar till # ? det är dom väl redan? Annars kör bara preventDefault eller return false;

ramo_andMedlem sedan nov. 2010214 inlägg

27 apr. 2011 13:48#3

Ja det är vad jag är ute efter! :) Men när jag klickar på en under ItemLevel3 så laddas sidan om och då "nollställs" menyn vilket inte e så bra ur användarsynpunkt. jag skulle helst vilja göra så att man liksom hela tiden ser vilken kategori man är på. Är det svårt att göra?

Anledningen till jag "krånglar till det" är pga bristande kunskap hos mig. Är inte så himla duktig på jQuery ännu. Jag satte href="#" på länkarna var att jag inte ville att sidan skulle ladda om när man bläddrar i menyn. Dom va inte så innan utan det var min jQuery kod som gjorde det.

voigtann1Medlem sedan juni 20019 519 inlägg

27 apr. 2011 13:51#4

Om du alla li har .selected på var du är:

(".selected").parent().show();

direkt efter:

$(".articleMenu ul").hide();

ramo_andMedlem sedan nov. 2010214 inlägg

27 apr. 2011 14:12#5

Tack! Nu funkar det nästan klockrent. När jag klickar på länkar i ItemLevel2 så måste sidan ladda om först innan jag kan klicka igen o då visas länkarna i ItemLevel3. Varför blir det så?

voigtann1Medlem sedan juni 20019 519 inlägg

27 apr. 2011 14:19#6

Renderas hela menyn ut på varje sida eller är det först när du besöker en sida, så länge ett a-element har en ul i samma nod så skall kodn fungera, dock skall man nog lösa detta med en bättre css-selector skall kolla på det när jag kommer hem

ramo_andMedlem sedan nov. 2010214 inlägg

28 apr. 2011 07:17#7

Menyn renderas ut på varje sida, den ligger ju till vänster hela tiden liksom. Om jag inte skulle ha ovanstående jQuery med så skulle sidan laddas om varje gång man klickar på en länk o så visas nästa nivå under.

voigtann1Medlem sedan juni 20019 519 inlägg

28 apr. 2011 07:55#8

Ja, att sidan laddas om förstå jag men om inte alla noder alltid syns så kommer du aldrig förbi detta (om du inte gör det med AJAX).

ramo_andMedlem sedan nov. 2010214 inlägg

28 apr. 2011 08:14#9

Aah okej då e ja med. Ska prata med dom som har webbshopsplattformen o fråga om dom kan ordna så alla noder alltid syns.