[js] Expanding/collapsing menu, maar nu opschonen!

[Verwijderd]

Ik heb met veel gepruts en gepriegel een script geschreven voor een verticaal expanding/collapsing menu dat op het moment precies doet wat ik wil. Hieronder vind je een sample van de code (zowel HTML als javascript).

Bij een klik op een trigger wordt het betreffende submenu geopend en worden alle overige menus gesloten (als deze al open stonden). Er is dus ten allen tijden maar 1 submenu geopend, tenzij het een sub-submenu betreft, dan blijft de directe parent uiteraard ook open.

Deze code werkt dus naar believen, maar is erg lang en omslachtig. Is het mogelijk hetzelfde te doen met minder en beter te onderhouden code?

(Er is trouwens bewust gekozen om geen inline clicks te gebruiken, en om de submenus met javascript te verbergen en niet dmv de stylesheet - beiden ivm toegankelijkheid.)

code:

            <ul>
              <li><a href="#" id="trigger-submenu1" title="">Submenu1</a>
                <ul id="navigation-submenu1">
                  <li><a href="#" title="">Optie</a></li>
                  <li><a href="#" title="">Optie</a></li>
                  <li><a href="#" title="">Optie</a></li>
                </ul>
              </li>
              <li><a href="#" id="trigger-submenu2" title="">Submenu2</a>
                <ul id="navigation-submenu2">
                  <li><a href="#" id="trigger-subsubmenu1" title="">Subsubmenu1</a>
                    <ul id="navigation-subsubmenu1">
                      <li><a href="#" title="">Optie</a></li>
                      <li><a href="#" title="">Optie</a></li>
                      <li><a href="#" title="">Optie</a></li>
                    </ul>
                  </li>
                  <li><a href="#" id="trigger-subsubmenu2" title="">Subsubmenu2</a>
                    <ul id="navigation-subsubmenu2">
                      <li><a href="#" title="">Optie</a></li>
                      <li><a href="#" title="">Optie</a></li>
                      <li><a href="#" title="">Optie</a></li>
                    </ul>
                  </li>
                  <li><a href="#" title="">Optie</a></li>
                  <li><a href="#" title="">Optie</a></li>
                  <li><a href="#" title="">Optie</a></li>
                </ul>
              </li>
            </ul>

code:

// This function shows an id
function showId(id) {
    if ( document.getElementById ) {
        document.getElementById(id).style.display = 'block';
    }
}

// This function hides an id
function hideId(id) {
    if ( document.getElementById ) {
        document.getElementById(id).style.display = 'none';
    }
}

// This function shows or hides ('flips') an id, depending on the current display value
function flipId(id) {
    if ( document.getElementById ) {
        if ( document.getElementById(id).style.display == 'block' ) {
            hideId(id);

        }
        else {
            showId(id);
        }
    }
}

// This function hides all submenus
function navigationHideAll() {
    hideId('navigation-submenu1');
    hideId('navigation-submenu2');
        hideId('navigation-subsubmenu1');
        hideId('navigation-subsubmenu2');
}

// This function controls the actual navigation behaviour
function navigation() {
    if ( document.getElementById ) {
        // Submenu 1
        document.getElementById('trigger-submenu1').onclick = function() {
            // onclick, flip the following id's
            flipId('navigation-submenu1');
            // onclick, hide the following id's
            hideId('navigation-submenu2');
                hideId('navigation-subsubmenu1');
                hideId('navigation-subsubmenu2');
        }
        // Submenu2
        document.getElementById('trigger-submenu2').onclick = function() {
            // onclick, flip the following id's
            flipId('navigation-submenu2');
            // onclick, hide the following id's
            hideId('navigation-submenu1');
            hideId('navigation-subsubmenu1');
            hideId('navigation-subsubmenu2');
        }
        // Subsubmenu1
        document.getElementById('trigger-subsubmenu1').onclick = function() {
            // onclick, flip the following id's
            flipId('navigation-subsubmenu1');
            // onclick, hide the following id's
            hideId('navigation-submenu1');
            hideId('navigation-subsubmenu2');
            // Do not hide the direct parent (submenu2)
        }
        // Subsubmenu2
        document.getElementById('trigger-subsubmenu2').onclick = function() {
            // onclick, flip the following id's
            flipId('navigation-subsubmenu2');
            // onclick, hide the following id's
            hideId('navigation-algemeen');
            hideId('navigation-subsubmenu1');
            // Do not hide the direct parent (submenu2)
        }

    }
}

function loadNavigation {
    navigation();
    navigationHideAll();
}
window.onload = loadNavigation;

[RobIII]

Verwijderd schreef op woensdag 14 december 2005 @ 18:25:
Deze code werkt dus naar believen, maar is erg lang en omslachtig. Is het mogelijk hetzelfde te doen met minder en beter te onderhouden code?

Ja dat is mogelijk.
En nu? Moeten wij het voor je gaan schrijven?

Wat heb je zelf al geprobeerd? Wat werkte er niet? enz. enz.

Paar hints:
• Je zou lussen (loops) kunnen gebruiken om items 1 voor 1 na te lopen in plaats van ze allemaal apart te doen.
• Je hebt veel stukken dezelfde code; maak daar eens functies voor?
• Recursie
Dat zijn al 3 hints/tips

...en dan maak je nog niet eens optimaal gebruik van je DOM-tree

[ Voor 125% gewijzigd door RobIII op 14-12-2005 18:38 ]

[Verwijderd]

Dat zou niet eens zo'n slechte oplossing zijn, RobIII.

...

Maar eerlijk gezegd zit ik met de handen in het haar.
Ik ben absoluut niet thuis in javascript en weet écht even niet hoe te werk te gaan.

Het lijkt mij dat ik de id van het op een bepaald moment geopende submenu kan vangen in een variabele, om bij een onclick van een andere trigger alleen dat submenu te sluiten - de huidige methode sluit immers een x-tal submenus die toch al gesloten zijn.

Verder moet dit stuk code herbruikbaar te maken zijn, maar ook dat is me tot op heden niet gelukt.

code:

        document.getElementById('trigger-subsubmenu2').onclick = function() {
            // onclick, flip the following id's
            flipId('navigation-subsubmenu2');
            // onclick, hide the following id's
            hideId('navigation-algemeen');
            hideId('navigation-subsubmenu1');
            // Do not hide the direct parent (submenu2)
        }

[BtM909]

Je bent absoluut niet thuis in Javascript, maar produceert wel deze code?

Je hebt 3 opties:

[list=1]
• Laat de code zo (if it's not broken, don't fix it)
• Vraagt degene die dit heeft gemaakt om het te optimaliseren, want wij doen niet aan script-requests
• Ga zelf JS leren en stel hier je beter uitgelegde vragen.


Tot die tijd, zet ik hier even een slotje op

[ Voor 4% gewijzigd door BtM909 op 14-12-2005 19:07 ]