Expanderande lista

4 svar · 722 visningar · startad av annaco 28 jan. 2013

annacoMedlem sedan apr. 200772 inlägg

Trådstart28 jan. 2013 10:58#1

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>

prplxrMedlem sedan juni 2012581 inlägg

29 jan. 2013 10:00#2

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.

annacoMedlem sedan apr. 200772 inlägg

30 jan. 2013 10:32#3

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?

@ndersMedlem sedan juni 200032 967 inlägg

30 jan. 2013 10:39#4

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

voigtann1Medlem sedan juni 20019 519 inlägg

30 jan. 2013 10:49#5

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/