Prepínanie vlastnosti list-style-image cez JavaScript

skgooner · Napísal **skgooner**: 29.08.2012 23:59

Zdravím, mám jeden problém, ktorý sa týka prepínanie CSS vlastnosti list-style-image cez JavaScript.

JavaScript:

Kód:

<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
    $("div.subMenu").hide();
    $("a.slide").click(function() {
        $("div.subMenu").slideToggle("fast");
    });
});
function switch(object)
{
object.listStyleImage="url('subMenuArrow.png')";
}
</script>

HTML:

Kód:

<ul class="menu">
<li onClick="switch(this);"><a class="slide" href="#">Exams</a>
<div class="subMenu">
<ul>
<li><a href="">Show Exams</a></li>
</ul>
</div>
</li>
<li><a href="logout.php">Log Out</a></li>
</ul>

Ide teda o to, že keď kliknem na link a.slide, tak sa mi vysunie subMenu a list-style-image sa mi zmení na šípku dolu namiesto šípky vpravo, ale len na li, v ktorom sa nachádza a.slide. Keď kliknem opäť na a.slide, tak subMenu sa samozrejme zasunie, ale list-style-image zostane šípka dole, to je jasné. Potrebujem pomôcť ako to spraviť, aby funkcia switch() fungovala ako toggle, teda pri zasunutí subMenu sa aj list-style-image zmenil zasa na šípku vpravo. Veľmi pekne Vás prosím o pomoc.

shaggy · Napísal **shaggy**: 30.08.2012 1:02

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.

skgooner · Napísal autor témy **skgooner**: 30.08.2012 10:00

Ďakujem!!! Presne toto som potreboval vedieť ako!

Ďakujem veľmi pekne.

Prepínanie vlastnosti list-style-image cez JavaScript

Podobné témy