Avatar billede internalerror Nybegynder
14. april 2009 - 17:31 Der er 5 kommentarer og
1 løsning

Skjul alle submenuer.

Jeg har brugt denne tutorial til at opbygge min menu.

http://www.interspire.com/content/articles/10/1/Building-An-Expanding-DHTML-Menu-With-CSS-and-JavaScript

Nu skal jeg have ændret scriptet så det lukker alle submenuer og ikke kun den sidste der er åbnet.

Jeg har selv udbygget scriptet så det holder det valgte menu punkt åben når man hopper videre til valgt side.

Hvis i følger dette link kan i se problemet.

http://www.elverbo.dk/version2/bestyrelsesmedlemmer.shtml?mymenu2


Hvordan løser jeg det?


Her er css delen af menuen.
.submenu{
    display: block;
    height: 19px;
    margin-left:10px;
    padding-top: 2px;
    padding-left: 7px;
    color: #333333;
}

.hide{
    display: none;
}

.show{
    display: block;
}

Her er javascriptet.
<script language="JavaScript" type="text/JavaScript">
<!--

var last_expanded = '';

function showHide(id){
  var obj = document.getElementById(id);
  var status = obj.className;
  if (status == 'hide') {
    if (last_expanded != '') {
      var last_obj = document.getElementById(last_expanded);
      last_obj.className = 'hide';
    }
    obj.className = 'show';
    last_expanded = id;
    } else {
      obj.className = 'hide';
  }
}

/*
Her er den del jeg selv har lagt på, til at holde valgt menu punkt åben.
*/
function pageload(){
  if (window.location.search.substring(1) > " ") {
    var id = window.location.search.substring(1)
    var obj = document.getElementById(id);
    obj.className = 'show';
  }
}


//-->
</script>


Og her er menuen.
<a class="menu1" onclick="showHide('mymenu1')">Info / seneste nyt</a><br/>
    <div id="mymenu1" class="hide">
        <a href="#" class="submenu">Link One here</a>
        <a href="#" class="submenu">Link Two here</a>
        <a href="#" class="submenu">Link Three here</a>
        <a href="#" class="submenu">Link Four here</a>
    </div>

<a class="menu1" onclick="showHide('mymenu2')">Bestyrelsen</a><br/>
    <div id="mymenu2" class="hide">
        <a href="bestyrelsesmedlemmer.shtml?mymenu2" class="submenu">Bestyrelses medlemmer</a>
        <a href="#" class="submenu">Link Two here</a>
        <a href="#" class="submenu">Link Three here</a>
        <a href="#" class="submenu">Link Four here</a>
    </div>
Avatar billede andreas13_fam Nybegynder
14. april 2009 - 18:55 #1
Hvis du bare vil skjule alle submenu's kunne du finde alle divs og sætte style til display:none

var skjuldivs = document.getElementById(venstre').getElementsByTagName('div');

for(var i=0;i<skjuldivs.length;i++)
{
skjuldivs[i].className = 'show';
}

Og behøver du ikke at finde ud af hvad der sidst er åbnet.
Avatar billede andreas13_fam Nybegynder
14. april 2009 - 19:03 #2
Det må så være:
function showHide(id){
    var skjuldivs = document.getElementById('venstre').getElementsByTagName('div');

    for(var i=0;i<skjuldivs.length;i++)
    {
    skjuldivs[i].className = 'hide';
    }
    document.getElementById(id).className = 'show';
}
Avatar billede internalerror Nybegynder
14. april 2009 - 19:12 #3
Tak for det.
Det var lige det der skulle til.
Avatar billede andreas13_fam Nybegynder
14. april 2009 - 19:34 #4
Jeg går ud fra du efter spørger et svar :D

PS: i stedet for at skrive: onclick="showHide('mymenu1')"
kunne du også skrive onclick="showHide(this)"

Så hedder funktionen bare

function showHide(obj){
    var skjuldivs = document.getElementById('venstre').getElementsByTagName('div');

    for(var i=0;i<skjuldivs.length;i++)
    {
    skjuldivs[i].className = 'hide';
    }
    obj.className = 'show';
}

Og så behøver du ikke at skrive noget forskelligt i hvert link, men det er en smags sag.
Avatar billede internalerror Nybegynder
14. april 2009 - 20:00 #5
Det går ikke med onclick="showHide(this)"

Der bliver nødt til at være et unikt id i onclick, ellers ved man jo ikke hvilken submenu der skal åbnes.

Jeg beholder dit første forslag.
Avatar billede andreas13_fam Nybegynder
14. april 2009 - 20:11 #6
Det er i orden :D
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester