[JavaScript]hide / unhide -en van <UL> - Softwareontwikkeling

maandag 27 februari 2006 22:58

Acties:

Een ninjja!

Topicstarter

Ik heb een navigatie menu gemaakt met de volgende opbouw. Ik wil de submenus kunnen openen door te klikken op 1, 2 of 3. Dit werkt. Maar wanneer ik hem wil sluiten door op 'sluiten' te klikken dan gebeurd er niets.

1
- sub1
- sub2
- sub3
- sluiten
2
3

HTML:

<div id="left_upper_blue">  
  <ul class="menu">
    <li onClick="document.getElementById('sub_1').style.display='block'">Item 1
            <ul id="sub_1">
                <li>Sub 1</li>
                <li>Sub 2</li>
                <li>Sub 3</li>
                <li id="exit1" onClick="document.getElementById('sub_1').style.display='none'">sluiten</li>
            </ul>
    </li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul> 
</div>

Cascading Stylesheet:

div#left_upper_blue {
    height: 220px;
    width: 236px;
    z-index:2;
    position: relative;
    top: -220px;
}


div#left_upper_blue .menu {
    float: right;
    list-style-type:none;
    margin-right: 5px;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
}

div#left_upper_blue .menu ul {
list-style-image:: none;
    list-style-type:none;
    margin-left: 0px;
    display: none;
    font-style: italic;
    font-size: 10px;
    color: #333333;
}


div#left_upper_blue .menu ul li {
list-style-image:: none;
list-style-type:none;
margin-left: -40px;
}

div#left_upper_blue .menu ul li ul li ul li {
    font-size: 9px;
}

Ik heb uiteraard al ge-googled en verschillende dingen geprobeerd maar geen resultaat. Wat doe ik fout?

[ Voor 26% gewijzigd door DoubleJ op 27-02-2006 23:02 ]

maandag 27 februari 2006 23:00

Acties:

OnTracK

ik kan mij niet herinneren dat er een display: hide; bestond

wel is er display: none; en evt. visibility: hidden;

Not everybody wins, and certainly not everybody wins all the time.
But once you get into your boat, push off and tie into your shoes.
Then you have indeed won far more than those who have never tried.

maandag 27 februari 2006 23:00

Acties:

We Are Borg

Moderator Wonen & Mobiliteit / General Chat

display hide bestaat niet

maandag 27 februari 2006 23:02

Acties:

DoubleJ

Een ninjja!

Topicstarter

Oops, dat is natuulijk none, stomme fout. Waarschijnlijk net perongeluk gedaan. Het staat nu gewoon op 'none' maar ook dit werkt niet.

maandag 27 februari 2006 23:02

Acties:

OnTracK

omdat je als je op die sluiten drukt je óók drukt op je andere link (want die omvat een veel groter stuk)

die worden dus tegelijk of kort na elkaar uitgevoerd (geen idee welke) wat er dus blijkbaar voor zorgt dat er niets gebeurd

... tenminste, dat is mijn vermoeden

[ Voor 45% gewijzigd door OnTracK op 27-02-2006 23:03 ]

Not everybody wins, and certainly not everybody wins all the time.
But once you get into your boat, push off and tie into your shoes.
Then you have indeed won far more than those who have never tried.

maandag 27 februari 2006 23:03

Acties:

DoubleJ

Een ninjja!

Topicstarter

Ah, natuurlijk! Thanks.

Ik heb er nu het volgende van gemaakt en dat werkt.

code:

.....
<li onClick="document.getElementById('sub_1').style.display='block'">Item 1</li>
            <ul id="sub_1">
.....

( </li> achter item1 )

[ Voor 105% gewijzigd door DoubleJ op 27-02-2006 23:05 ]

maandag 27 februari 2006 23:07

Acties:

crisp

Devver

Pixelated

DoubleJ schreef op maandag 27 februari 2006 @ 23:03:
Ah, natuurlijk! Thanks.

Ik heb er nu het volgende van gemaakt en dat werkt.
code:
1
2
3
4
.....
<li onClick="document.getElementById('sub_1').style.display='block'">Item 1</li>
            <ul id="sub_1">
.....
( </li> achter item1 )

Nu nest je een ul direct in een ul --> invalid syntax

je moet je eens verdiepen in event bubbling want dat is de oorzaak van je probleem...

[ Voor 10% gewijzigd door crisp op 27-02-2006 23:08 ]

Intentionally left blank

maandag 27 februari 2006 23:09

Acties:

OnTracK

Je kan beter alleen de woorden "Item 1" clickable maken dmv een span ofzo i.p.v. de hele <li>

Not everybody wins, and certainly not everybody wins all the time.
But once you get into your boat, push off and tie into your shoes.
Then you have indeed won far more than those who have never tried.

maandag 27 februari 2006 23:19

Acties:

DoubleJ

Een ninjja!

Topicstarter

Will do guys!

dinsdag 28 februari 2006 14:09

Acties:

DoubleJ

Een ninjja!

Topicstarter

Ik zoek me helemaal suf met google maar krijg hierover geen duidelijke uitleg. Hoe kan ik het volgende script includen in mn head of externe file en hoe spreek ik t aan in mn HTML? Want op deze manier word mn code wel heel druk.

onclick="document.getElementById('sub_1').style.display='block'"

dinsdag 28 februari 2006 15:45

Acties:

Blue-eagle

Heel simpel:

HTML:

<html>
<head>
<title></title>
<style>
li.hidesubmenu ul { display: none; }
li.showsubmenu ul { display: block; }
</style>
</head>

<body>

<ul>
    <li class="hidesubmenu" onclick="this.className=(this.className=='hidesubmenu')?'showsubmenu':'hidesubmenu';">
        <span>Dit is een link</span>
        <ul>
            <li>Submenu link</li>
            <li>Submenu link</li>
            <li>Submenu link</li>
        </ul>
    </li>
    <li class="hidesubmenu" onclick="this.className=(this.className=='hidesubmenu')?'showsubmenu':'hidesubmenu';">
        <span>Dit is een link</span>
    </li>
    <li class="hidesubmenu" onclick="this.className=(this.className=='hidesubmenu')?'showsubmenu':'hidesubmenu';">
        <span>Dit is een link</span>
    </li>
    <li class="hidesubmenu" onclick="this.className=(this.className=='hidesubmenu')?'showsubmenu':'hidesubmenu';">
        <span>Dit is een link</span>
    </li>
</ul>

</body>
</html>

(Niet gevalideerd enzo, maak er zelf maar mooie functies van etc.)