[JS] Switchen tussen block/none werkt niet helemaal. - Softwareontwikkeling

maandag 10 oktober 2005 18:19

Acties:

Topicstarter

edit: Arghh!! eerste keer in P&W en ik ga al de fout in, moven naar een W&G please
Ik ben al zo'n 2 uur bezig met dit probleem, en ik heb google geraadpleegd, maar alles kwam zowat op hetzelfde uit. Probleem is alsvolgt:
Ik heb een collapse menutje(voorbeeld):

>> Help
>>>>FAQ
>>>>Forum
>>>>Contact

Nu wil ik dus dat als ik op help druk, die opsomming collapsed, en als ik vervolgens nog een keer klik, dat die weer expand.
Nu heb ik als beginner in javascript hier het volgende scriptje voor gemaakt:

code:

function SwitchMenu(obj)
{
    var el = document.getElementById(obj);
    if(el.style.display != "block"){
        el.style.display = "block";
    }
    else{
        el.style.display = "none";
    }
}

Nu werkt dus het expanden prima, maar als ik wil collapsen moet ik dubbelklikken, al zou je verwachten van niet?
In mijn style.css bestand staat de zooi default op display: block... Ik zet even alles voor mezelf op een rijtje:
-----> Block komt functie binnen
-----> Gaat naar else functie (omdat hij wel degelijk block is)
-----> Van block gaat hij naar none.

Nu vind ik het dus raar dat ik de functie 2 keer moet aan roepen om het resultaat hierboven te krijgen. Kan iemand mij hiermee helpen? Ik word er een beetje gek van.

[ Voor 22% gewijzigd door danslo op 10-10-2005 18:28 ]

maandag 10 oktober 2005 18:30

Acties:

drm

f0pc0dert

Nu vind ik het dus raar dat ik de functie 2 keer moet aan roepen om het resultaat hierboven te krijgen. Kan iemand mij hiermee helpen? Ik word er een beetje gek van.

Dit is afhankelijk van de default state van dat object. Het komt simpelweg door het volgende:

Als jij in CSS een style property van een object aangeeft (voordat er uberhaupt sprake is van Javascript), is die property nog niet leesbaar voor JS via de style property. Dus:

code:

<style type="text/css">
   div {
      display:none
   }
</style>
<!-- .... --->
<body onload="alert ( document.getElementById('somediv').style.display )">
   <div id="somediv">woei</div>
</body>

document.getElementById ( 'somediv' ).style.display geeft een lege waarde terug.

Maar op het moment dat je hem set met javascript, is hij wel uit te lezen. In eerste instantie is jouw eerste if dus altijd waar, omdat document.getElementById ( obj ).style.display een lege waarde teruggeeft ( '' )

Je bent dus van het probleem af, als je de if omdraait:

code:

if(el.style.display == "none"){
        el.style.display = "block";
    } else{
        el.style.display = "none";
    }

Je kunt ook nog met de computed style en zo gaan werken, maar dat is eigenlijk een beetje overdreven voor dit soort dingen

[ Voor 11% gewijzigd door drm op 10-10-2005 18:31 ]

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

maandag 10 oktober 2005 18:32

Acties:

danslo

Topicstarter

Grote dank

Kan ik weer even verder

Heh, ik heb ergens anders ook een switch geval gezien, en nu snap ik waarom ze de block met document.write via javascript er in deden. Nogmaals bedankt

maandag 10 oktober 2005 18:35

Acties:

eamelink

Droptikkels

drm schreef op maandag 10 oktober 2005 @ 18:30:
Je bent dus van het probleem af, als je de if omdraait:
code:
1
2
3
4
5
if(el.style.display == "none"){
        el.style.display = "block";
    } else{
        el.style.display = "none";
    }

Dat is geen echte oplossing, want nu zal het laten zien van een hidden element niet direct werken, als er nog geen style is

.

Je kan het beste óf overal van tevoren een style inzetten, óf een test doen op 'block' of leeg versus none. Want als display niet gegeven is zal het automatisch op block of inline staan, maar niet op none.

maandag 10 oktober 2005 18:41

Acties:

drm

f0pc0dert

eamelink:
Dat is geen echte oplossing, want nu zal het laten zien van een hidden element niet direct werken, als er nog geen style is .

Neuh, daar heb je opzich wel gelijk in, maar 't ging mij vooral ff om 't begrip van waar 't vandaan komt.

Music is the pleasure the human mind experiences from counting without being aware that it is counting
~ Gottfried Leibniz

maandag 10 oktober 2005 18:44

Acties:

NMe

Quia Ego Sic Dico.

PW>>WG

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.