---
title: "menyproblem"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/136304-menyproblem"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Rob Tjotj"
published: "2005-10-24T13:53:10.000Z"
updated: "2005-10-25T16:22:54.000Z"
replies: 3
views: 377
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/136304-menyproblem"
---

# menyproblem

## #1 — Rob Tjotj, 2005-10-24T13:53Z

Hej har sökt men inte hittat riktigt vad jag söker efter.
Jag håller på med en meny som förenklat ser ut som så:

\<html\>
\<head\>
\<script LANGUAGE="JavaScript"\>
function stang (myId){
    thisId=document.all(myId);
      thisId.style.display = "none";
    }
  function toggle ( myId ) {
    thisId=document.all(myId);
    if (thisId.style.display == "none") {
      thisId.style.display = "";
    } else {
      thisId.style.display = "none";
    }
  }
//--\>
\</script\>
\</head\>
\<body\>
\<span onclick="toggle('Meny1');stang('Meny2')"\>\<A HREF="#"\>\<B\>Meny 1\</B\>\</A\>\</span\>
\<span onclick="toggle('Meny2');stang('Meny1')"\>\<A HREF="#"\>\<b\>Meny 2\</b\>\</A\>\</span\>
\<div id="Meny1" style="display: 'none';"\>\<b\>Menyalternativ 1:1 Menyalternativ 1:2\</b\>\</div\>
\<div id="Meny2" style="display: 'none';"\>\<b\>Menyalternativ 2:1 Menyalternativ 2:2\</b\>\</div\>
\</body\>
\</html\>

Jag vill kunna lägga till fler "huvudmenyer" och att när en huvudmeny väljs så stängs de andra. Jag skulle också vilja veta att det fungerar i "alla" webbläsare.

Helst en funtion som både öppnar valt alternativ och stänger de andra eventuellt öppna alternativen. Jag skulle också i samma veva vilja byta class på huvudmenyn.

Tack på förhand.
Robert

Permalänk: https://www.webforum.nu/p/136304

## #2 — Peter S, 2005-10-25T12:44Z

Enkelt exempel:

```
<style>
.submenues{
  display: none;
}

#menu{
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu li {
  display: inline;
}

.open{
  background: #eee;
}

.closed{
  background: #fff;
}
</style>

<script type="text/javascript">

function toggle(n){
  if (!document.getElementById){ return true }

  var i   = 1,
      elm = null;

  while (true){
    if (elm = document.getElementById("submenu" + i)){
      var p = document.getElementById("menu" + i);

      if (i == n){
	p.className = p.className == "open" ? "closed" : "open";	
	elm.style.display = elm.style.display == "block" ? "none" : "block";
      } else {
	p.className = "closed";
	elm.style.display = "none";
      }
    } else {
      return false;
    }

    ++i;
  }
}

</script>

<ul id="menu">
  <li id="menu1"><a href="meny1.html" onclick="return toggle(1)">Meny 1</a></li>
  <li id="menu2"><a href="meny2.html" onclick="return toggle(2)">Meny 2</a></li>
</ul>
<div id="submenu1" class="submenues"><b>Menyalternativ 1:1 Menyalternativ 1:2</b></div>
<div id="submenu2" class="submenues"><b>Menyalternativ 2:1 Menyalternativ 2:2</b></div>
```

Skriptet fungerar inte i "alla" webbläsare, men är konstruerat på sådant sätt att man navigeras till den länk som finns i \<a\>\-taggen om webbläsaren inte stödjer document.getElementById.

Märk att elementen är döpta efter ett visst mönster.

Permalänk: https://www.webforum.nu/p/1694763

## #3 — Rob Tjotj, 2005-10-25T14:42Z

Mycken tack.
Det är otroligt vilken kunskap som finns att hämta.
Jag har lyckats modifiera det till att se ut som jag önskat.
Vet du eller någon vilka webbläsare som har problem med koden?

Permalänk: https://www.webforum.nu/p/1694816

## #4 — Peter S, 2005-10-25T16:22Z

En kompatibilitetslista återfinns [här](http://www.quirksmode.org/dom/w3c_core.html).

Glöm inte att använda funktionen *acceptera som slutgiltigt svar*.  :)

Permalänk: https://www.webforum.nu/p/1694877

---

Tråden på webben: https://www.webforum.nu/amne/javascript/136304-menyproblem