---
title: "Expanderande lista"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/191105-expanderande-lista"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "annaco"
published: "2013-01-28T10:58:21.000Z"
updated: "2013-01-30T10:49:29.000Z"
replies: 4
views: 722
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/191105-expanderande-lista"
---

# Expanderande lista

## #1 — annaco, 2013-01-28T10:58Z

Jag vill göra en expanderande lista där underliggande meny öppnas när man klickar på den länk som man är intresserad av.
Just nu öppnas listan så fort jag för musen över länkarna men så vill jag inte ha det.
Hittar inget bra exempel på hur jag ska göra.
Är nybörjare på Javascript men har förstått att det är onclick jag borde använda men får inte till något som fungerar.

Så här ser en del av listan ut nu.
\<li\>
      \<a href="tradgardar.html"\>Sevärda trädgårdar\</a\>
      \<ul class="subMenu"\>
         \<li\>\<a href="angermanland.html"\>Ångermanland\</a\>\</li\>
         \<li\>\<a href="dalarna.html"\>Dalarna\</a\>\</li\>
          \<ul\>
            \<li\>\<a href="tradgardarleksand.html"\>Leksand\</a\>\</li\>
          \</ul\>
         \<li\>\<a href="gavleborg.html"\>Gävleborg\</a\>\</li\>
          \<ul\>
            \<li\>\<a href="tradgardargavle.html"\>Gävle\</a\>\</li\>
          \</ul\>
         \<li\>\<a href="orebro.html"\>Örebro län\</a\>\</li\>
          \<ul\>
            \<li\>\<a href="tradgardaraskersund.html"\>Askersund\</a\>\</li\>
          \</ul\>
          \<li\>\<a href="sodermanland.html"\>Södermanland\</a\>\</li\>
          \<ul\>
            \<li\>\<a href="tradgardarjulita.html"\>Julita\</a\>\</li\>
            \<li\>\<a href="tradgardarstockholm.html"\>Stockholm\</a\>\</li\>
          \</ul\>
         \</ul\>
   \</li\>

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

## #2 — prplxr, 2013-01-29T10:00Z

Vi behöver mer kod än sådär. Det där är bara själva markup'en och har ingen sådan funktionalitet du beskriver i sig.

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

## #3 — annaco, 2013-01-30T10:32Z

Sorry, det gick lite för fort. Här kommer övrig kod.

css:

```
ul#Submenu {
   list-style-type: none;
   margin: 100px;
   padding: 100px;
}

ul#Submenu li a:link, ul#nav li a:visited {
   display: block;
   width: 120px;
   height: 18px;
   padding: 0px 0px 0px 3px;
   margin: 0px 0px 0px 0px;
}

#nav, #nav .subMenu, ul#nav li {
   list-style-type: none;
   padding: 0px;
   margin: 0px;			
}
ul#nav li {
   width: 200px;
   background-color: #ffffff;
   color: black;
   font-family: "Trebuchet MS", Arial, Sans-serif;
   font-size: 15px;
}
ul#nav li ul.subMenu li {
   background-color: #ffffff;
}
ul#nav li ul.subMenu li a:link, ul#nav li ul.subNav li a:visited {
   display: block;
   height: 20px;
   color: black;
   text-decoration: none;
}
ul#nav li ul.subMenu li a:hover, ul#nav li ul.subNav li a:active {
   background-color: yellow;

}

ul#nav>li {
   height: 20px;
   overflow: hidden;
   line-height: 20px;
}

ul#nav li:hover, ul#nav li:active {
   height: auto;
   overflow: auto;
}

<ul id="nav">
   <li>
      <a href="annastradgard.html">Startsida</a>
   </li>
   <li>
      <a href="fakta.html">Fakta</a>
      <ul class="subMenu">
         <li><a href="design.html">trädgårdsdesign</a></li>
         <li><a href="jord.html">Jorden</a></li>
         <li><a href="odling.html">Odling</a></li>
         <li><a href="plantering.html">Plantering</a></li>
         <li><a href="problem.html">Problem i trädgården</a></li>
         <li><a href="vaxter.html">Växter</a></li>
      </ul>
   </li>
<a href="tradgardar.html">Sevärda trädgårdar</a>
      <ul class="subMenu">
         <li><a href="norrland.html">Norrbotten</a></li>
         <li><a href="vasterbotten.html">Västerbotten</a></li>
         <li><a href="jamtland.html">Jämtland</a></li>
         <li><a href="harjedalen.html">Härjedalen</a></li>
         <li><a href="medelpad.html">Medelpad</a></li>
         <li><a href="angermanland.html">Ångermanland</a></li>
         <li><a href="dalarna.html">Dalarna</a></li>
          <ul>
            <li><a href="tradgardarleksand.html">Leksand</a></li>
          </ul>
         <li><a href="gavleborg.html">Gävleborg</a></li>
          <ul>
            <li><a href="tradgardargavle.html">Gävle</a></li>
          </ul>
   </ul>
   </li>
</ul>
```

Listan är väldigt lång så jag har förkortat den en hel del men funktionen är den samma på hela.

Hur ska jag göra om den för att listan bara ska öppnas när jag klickar på länkarna?

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

## #4 — @nders, 2013-01-30T10:39Z

Hej!

Använd \[kod\]-taggar när du postar kod, så är det lättare för oss att läsa.
Jag redigerade in i ditt inlägg ovan.

mvh

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

## #5 — voigtann1, 2013-01-30T10:49Z

Din HTML struktur är felaktig, du har ett a-element direkt under en ul

men om du har en liknande struktur:

```
<ul id="nav">
    <li><a href="annastradgard.html">Startsida</a></li>
    <li>
        <a href="fakta.html">Fakta</a>
        <ul class="subMenu">
            <li><a href="design.html">trädgårdsdesign</a></li>
            <li><a href="jord.html">Jorden</a></li>
            <li><a href="odling.html">Odling</a></li>
            <li><a href="plantering.html">Plantering</a></li>
            <li><a href="problem.html">Problem i trädgården</a></li>
            <li><a href="vaxter.html">Växter</a></li>
        </ul>
    </li>
    <li>
        <a href="tradgardar.html">Sevärda trädgårdar</a>
        <ul class="subMenu">
            <li><a href="norrland.html">Norrbotten</a></li>
            <li><a href="vasterbotten.html">Västerbotten</a></li>
            <li><a href="jamtland.html">Jämtland</a></li>
            <li><a href="harjedalen.html">Härjedalen</a></li>
            <li><a href="medelpad.html">Medelpad</a></li>
            <li><a href="angermanland.html">Ångermanland</a></li>
            <li><a href="dalarna.html">Dalarna</a>
                <ul>
                    <li><a href="tradgardarleksand.html">Leksand</a></li>
                </ul>
            </li>
            <li><a href="gavleborg.html">Gävleborg</a></li>
            <li><a href="tradgardargavle.html">Gävle</a></li>
        </ul>
    </li>
</ul>
```

och ta bort hover i din CSS så löser du det rätt enkelt med jQuery, något i denna stil:

```
$("#nav a:has(~ul.subMenu)").click(function(e){
    e.preventDefault();
    $(this).next().slideToggle(600);
});
```

Demo: <http://jsfiddle.net/Vrtkb/> om du har underkategorier så: <http://jsfiddle.net/Vrtkb/1/>

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

---

Tråden på webben: https://www.webforum.nu/amne/javascript/191105-expanderande-lista