Morjens!!
Elikkäs yritän tehdä jQueryn avulla sidebar menua. Tietämykseni JavaScriptistä saati jQuerysta on melkoisen heikkoa. Tutoriaaleita lukemalla ja yhdistelemällä esimerkki pätkiä olen saanut koodini pelittämään jotenkuten:
- ala valikot menevät aluksi piiloon
- mikäli linkin alla on uusi valikko, ilmoitetaan siitä vihreällä plussalla linkin vieressä..
- ala valikot aukeaa ja menee kiinni.
seuraavat ei toimi:
- linkin vieressä olevan +/- merkin pitäisi vaihtua sen mukaan, onko valikko avoin/suljettu
- Samalla vihreän värin pitäisi vaihtua punaiseen
- Ja yksi tavoite olisi tietysti, että yksi ala valikko kerrallaan auki, esimerkiski jos klikkaan toisen valikon auki, edellinen sulkeutuu ennen, kuin seuraava aukeaa..
jQuery purkkani siis näyttää tältä tällähetkellä:
$(document).ready(function() {
$("ul > ul").hide();
$("ul > ul").prev("li").children().add("span").addClass("open").text("+");
$("li").click(function(event){
$(this).next("ul").toggle('slow', function(){
$(".log").text('Transition Complete');
$(this).prev("li").children("span").text("-").addClass("close");
});
});
$("#menu li").hover(function() {
$(this).addClass("hower");
$(".log").text(this.data());
},function(){
$(this).removeClass("hower");
});
});Ja html lista näyttää tältä:
<ul id="menu">
<li> Item 1 <span class="close">-</span> </li>
<ul class="ala">
<li> Item 1.1 </li>
<li> Item 1.2 <span class="close">-</span> </li>
<ul class="ala">
<li> Item 1.2.3 </li>
</ul>
<li> Item 1.3 </li>
</ul>
<li> Item 2 </li>
<li> Item 3 </li>
<li> Item 4 <span class="open">+</span> </li>
<li> Item 5 </li>
<ul class="ala" >
<li> Item 5.1 </li>
<li> Item 5.2 </li>
</ul>
<li> Item 6 </li>
</ul>
<div class="log"></div>entäpä pitäisikö tuon alavalikon olla aina sen lista -elementin sisällä, jonka alle tuo kuuluu?
Valitan mahdollista huonoa selitystä, kuten aina... Mutta toivon että ymmärrätte mistä kenkä puristaa.
Tässä vielä linkki, selvennykseksi touhusta.
Listan (ul) sisällä voi olla vain listan kohtia (li). Sisempi ul-elementti kuuluu siis li-elementin sisään. Myös valitsin "ul > ul" pitää tietenkin muuttaa. Kannattaa validoida HTML-koodi.
En ymmärrä, miksi HTML-koodissasi on valmiiksi noita span-elementtejä ja miksi yksi niistä on kohdassa, jossa ei edes ole mitään avattavaa. Lisäksi nuo pitkät jQuery-rimpsusi ovat minusta jotenkin päin honkia. Yleensä selvin lähtökohta on, että sivun HTML-koodi muodostaa järkevän rakenteen jo itsessään ja JS sitten lisää sinne omat kikkansa.
Ehkä kaipaat jotain tällaista (tosin animaatio puuttuu):
<!DOCTYPE html>
<meta charset="UTF-8" />
<title>X</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
.closed {
display: none;
}
</style>
<script>
$(document).ready(function() {
// Sivun latautuessa ei animoida vaan piilotetaan kaikki nopeasti.
var animate = false;
// Tämä funktio muuttaa nappia (+/-) ja listan näkyvyyttä.
var toggle = function() {
var span = $(this);
var ul = span.parent("li").children("ul");
if (ul.hasClass("closed")) {
ul.removeClass("closed");
span.text("-");
} else {
ul.addClass("closed");
span.text("+");
}
// if (animate) { ... }, tunge animaatiot johonkin väliin.
};
// Lisätään span-elementit ja niille toggle-toiminto ja ajetaan kerran.
$("#menu ul").each(function() {
$("<span>").insertBefore(this).click(toggle).click();
});
// Myöhemmin eli oikeilla klikkauksilla otetaan animaatiot mukaan.
animate = true;
});
</script>
<ul id="menu">
<li> Item 1
<ul>
<li> Item 1.1 </li>
<li> Item 1.2
<ul>
<li> Item 1.2.3 </li>
</ul>
</li>
<li> Item 1.3 </li>
</ul>
</li>
<li> Item 2 </li>
<li> Item 3 </li>
<li> Item 4 </li>
<li> Item 5
<ul>
<li> Item 5.1 </li>
<li> Item 5.2 </li>
</ul>
</li>
<li> Item 6 </li>
</ul>Aihe on jo aika vanha, joten et voi enää vastata siihen.