• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

jQuery Bei aktivier Klasse slideIn

Taucherglocke

Neues Mitglied
Guten Ab
end liebe Leute,

Ich bastle gerade an der Website für einen Freund und habe einen FullPageSlider (Bootstrap = http://startbootstrap.com/template-overviews/full-slider/ ) dafür benutzt.
Die Indikatorpunkte, welche mit dem Bild verknüpft sind, habe ich in Überschriften umgewandelt, welche dann einfach mit einer class="active" farbig hinterlegt werden.

Nun möchte ich dazu noch eine Navigation, wobei der Menübutton permanent gezeigt werden soll, jedoch untergeordnete ListItems (für jedes Bild unterschiedliche) sich aus dem Menübutton via slideDown aufbauen sollen.
Hoffe das ist soweit nachvollziehbar?

Bild A -> Menü -> Submenü A
Bild B -> Menü -> Submenü B
usw.

<div id="nav_main">
<ul>
<li><a href="#">Menü</a></li>
<ul id="nav_1">
<li><a href="#">Unterpunkt</a></li>
<li><a href="#">Unterpunkt</a></li>
<li><a href="#">Unterpunkt</a></li>
<li><a href="#">Unterpunkt</a></li>
</ul>
<ul id="nav_2">
<li><a href="#">Unterpunkt</a></li>
<li><a href="#">Unterpunkt</a></li>
<li><a href="#">Unterpunkt</a></li>
<li><a href="#">Unterpunkt</a></li>
</ul>
<ul id="nav_3">
<li><a href="#">Unterpunkt</a></li>
<li><a href="#">Unterpunkt</a></li>
<li><a href="#">Unterpunkt</a></li>
</ul>
<ul id="nav_4">
<li><a href="#">Unterpunkt</a></li>
<li><a href="#">Unterpunkt</a></li>
<li><a href="#">Unterpunkt</a></li>
<li><a href="#">Unterpunkt</a></li>
</ul>
</ul>
</div>

Ich habe ein Menü erstellt, welches mehrere Untermenüs hat.
Nun habe es mir so vorgestellt, dass ich wenn die class="active" vorhanden ist,
die ul mit der id="nav_x" eingeblendet wird, bzw. falls nicht vorhanden ausgeblendet wird.

Ich bin noch recht neu in Sachen JavaScript/jQuery und dachte mir so könnte das aussehen.

<script>
var nav_extend = ('active');

if (nav_extend == 1 (ist da?)) {
('#nav_x').slideIn();
} else {
('#nav_x').slideOut();
}
}
</script>

Leider (ihr könnt es euch schon vorstellen) funktioniert das so leider nicht :(
Könnt ihr mir da bitte weiterhelfen?

Vielen dank
Sebastian
 
Zuletzt bearbeitet:
Ich habe noch was anderes versucht, was finde ich voll gut klingt ( :D ), aber irgendwie will es einfach nicht.

Ich habe den li´s, welche die Bilder beinhalten, jeweils eine ID vergeben.

Wenn ich nun sage, dass wenn ein li mit der id="img_1" die class="activ" hat, dann slideDown.

Also so:

if ( $('#img_1').hasClass('active')) {
$ ('#nav_1').slideDown(slow);
} else {
$('#nav_1').slideUp(slow);
}

So hätte ich dann für jedes Untermenü solch einen Code angelegt.

Jedoch funktioniert es leider nicht.

Das von dir Tronjer versteh ich leider auch nicht wie genau ich es umsetzen soll :(
 
Zuletzt bearbeitet:
Zurück
Oben