Erstens muss ich Betonung, dass die HTML vorge erzeugt wird und nicht verändert werden kann - sonst würde ich es nicht auf diese Weise tun:)ändern CSS-Klasse basiert auf Existenz
So ....
Das Skript und der HTML-Code unten erstellen ein nettes Versteck-/Zeige-Menü. Wenn Sie auf den Navheader klicken, wird das Navitem sichtbar.
Allerdings möchte ich die CSS-Klasse des Navheaders basierend darauf ändern, ob Navitem direkt darunter liegt.
z.B.
navheader (Change Class to linksbelow)
navitem
navheader (Change Class to NOlinksbelow)
navheader (Change Class to NOlinksbelow)
navheader (Change Class to linksbelow)
navitem
etc....
Meine HTML und JQUERY:
<script>
$(function() {
$('.Nav table .navitem').hide();
$('.Nav table.navheader').click(function() {
$(this).parent().parent().next().find(".navitem").slideToggle('100');
});
});
</script>
<div class="Nav">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table class="navheader">
<tr>
<td>
<a class="navheader" href="#">Header Link 1</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<table class="navitem">
<tr>
<td>
<a class="navitem" href="#">Link 1</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="navheader">
<tr>
<td>
<a class="navheader" href="#">Header link 2</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
sein kompliziert, aber es funktioniert, jedoch gilt es, die Klasse zu der TR nicht die navheader. Irgendwelche Zeiger? – CLiown
Oh ja, 'tschuldigung, vergaß das ... gib mir eine Minute, ich werde versuchen, es auszuarbeiten. – JorenB
Ich denke du könntest einfach $ (...). Parent(). AddClass ('link ...'); – epascarello