Pár poznámok:
1. nepoužíva list-style-image, sú s tým iba problémy, obrázok nevieš pekne napozicovať. Použi background.
2. keď už používaš jQuery, tak si zjednoť bindovanie eventov. Namiesto:
Kód:
<li onClick="switch(this);"><a class="slide" href="#">Exams</a>
v javascripte napíšeš:
Kód:
$(".menu li").click(function() {
switch();
... prípadný ďalší kód ...
});
+ tento kód odstráň - je nezmysel bindovať event na LI aj na A a pritom majú robiť takmer to isté:
Kód:
$("a.slide").click(function() {
$("div.subMenu").slideToggle("fast");
});
Stačí to pridať iba na LI (alebo na A, vyber si).
3. Výsledok:
Kód:
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
$(".menu ul").hide();
$(".menu li.moja_trieda").click(function() {
var thisObj = $(this);
thisObj.find("ul").slideToggle("fast");
thisObj.toggleClass("active");
});
});
</script>
a html môžeš upraviť takto:
Kód:
<ul class="menu">
<li class="moja_trieda"><a class="slide" href="#">Exams</a>
<ul>
<li><a href="">Show Exams</a></li>
</ul>
</li>
<li><a href="logout.php">Log Out</a></li>
</ul>
Pričom nastavíš v CSS, že ak bude mať LI triedu "active", tak sa mu zobrazí iná šípka, ako keď tú triedu nebude mať. + vyhodil som ten zbytočný div, ak ho tam potrebuješ, tak si ho tam daj.
Ďakujem veľmi pekne.
