2009-06-25 4 views
1

Also im Grunde versuche ich, die Top-Level-Kategorien Bild eines Pfeil nach unten eingeschaltet zu halten, während Sie über die Elemente des Untermenüs schweben. Ich möchte dies durch jQuery auf eine Hover-Funktion tun, aber ich kann nicht für das Leben von mir eine Auswahl treffen, um die Untermenüpunkte anzusteuern.Kann den jQuery-Selektor nicht herausfinden

Hier ist der Code, ich versuche zu laufen:

$(document).ready(function() { 
    $('.sub ul > li').hover(function() { 
     $(this).parents('a.sub').attr('src', 'images/DownArrow.png'); 
}, 
function(){ 
    $(this).parents('a.sub').attr('src', 'images/DownArrowOff.png'); 
    }); 
}); 

Auf diesem Drop-Down-Menü:

http://www.seth-duncan.com/Test/TestMenu.html

Aber wie ich ich kann nicht herausfinden, die Wähler, sagte Ziel diese Untermenüpunkte, damit ich die Quelle für das Bild ändern kann.

Dies muss durch jQuery nicht durch CSS getan werden (glauben Sie mir, ich weiß, es funktioniert aber nicht mit der Art, wie ich diese Aufgabe erfüllen müssen)

Dank für irgendwelche und alle Hilfe.

-Seth

Antwort

2

Ich denke, die Tatsache, dass die Bilder on the fly hinzugefügt werden, mit ihnen stört von jQuery gefunden werden. Es sei denn, Sie haben die Ereignisse mit live() gebunden. Ich denke, sie werden vermisst.

Das sagte, hier ist, wie ich es zur Arbeit gebracht habe.

$(document).ready(function(){ 
    var downArrow = '/Test/images/DownArrow.png'; 
    var downArrowOff = '/Test/images/DownArrowOff.png'; 

    $("#menu li a.sub").hover(function() { 
     $(this).find('img').attr('src',downArrow); 
    }, function() { 
     $(this).find('img').attr('src',downArrowOff); 
    }); 
    $("#menu li ul").hover(function() { 
     $(this).parents('li:has(a)').children('a.sub').find('img').attr('src', downArrow); 
    }, function() { 
     $(this).parents('li:has(a)').children('a.sub').find('img').attr('src', downArrowOff); 
    }); 
}); 
2

Das Problem ist, mit dem Wähler, um Sie verwenden, um das li zu schweben ist. Ihr Selektor von $ ('. Sub ul> li') sucht nach einem ul-Element innerhalb eines Elements mit einer Klasse von sub. Ihr ul-Element ist eigentlich ein Geschwister des Klassen-Subs. Ändere deinen Selektor so, dass er wie $ ('. Sub ~ ul> li') aussieht. Dadurch werden alle deine li richtig ausgerichtet.

nun mit, was artlung geschrieben, Ihre Wähler auf den Pfeil Bild, um wieder wie folgt aussehen sollte:

$(this).parents('li:has(a)').children('a.sub').find('img') 

Sobald Sie auf das Bild zu bekommen, können Sie dann die Attribute ändern, wie Sie wollen.