Mein eigenes jQuery Akkordeon
Frage
Hey Leute, ich habe die folgende Menüstruktur erstellt:
<div id="menu">
<ul>
<li><a href="#">Main Item1</a></li>
<li><a href="#">Main Item2</a></li>
<li><a href="#">Main Item3</a>
<ul>
<li><a href="#">SubItem for MainItem3</a></li>
<li><a href="#">2ndSub for MainItem3</a></li>
</ul>
</li>
<li><a href="#">Main Item4</a>
<ul>
<li><a href="#">SubItem for MainItem4</a></li>
<li><a href="#">2ndSub for MainItem4</a></li>
</ul>
</li>
</ul>
</div>
Das ist also meine Menüstruktur. Jetzt möchte ich JQuery neuest verwenden, um den Slideup/SlideDown -Effekt zu erzielen.
Ich mache so:
$(document).ready(function(){
$('#menu ul li:has(ul)').mouseenter(function(){
$('#menu ul li ul').slideDown('slow');
}).mouseleave(function(){
$('#menu ul li ul').slideUp('slow');
});
});
Ich habe zum ersten Mal Mausover und Mouseout ausprobiert, aber als ich diese Funktion verwendete, funktionierte der Mausover und als ich zum U -Boot gehen wollte, war das Menü aufgetaucht, aber das Mausout -Ereignis erfolgt. Jetzt hat es funktioniert, aber als ich auf dem Hauptartikel 3 zeichnete, auch die Subs aus dem Hauptartikel 4 offen und schließen auf Mouseout?!?! Wie sage ich nur die Menüelemente aus dem Hauptartikel 3 ADER -Hauptartikel 4 ???
Hoffe du verstehst was ich meine?
Vielen Dank
Lösung
$(function(){
$('#menu ul li:has(ul)').hover(function(){
$(this).find('ul').slideDown('slow');
}, function(){
$(this).find('ul').slideUp('slow');
});
});
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow