Frank P Posted November 21, 2011 Share Posted November 21, 2011 Hi, I have two nested menu's, that should open & close by onclick. Could someone tell me why the first example works (Kid example) and the second one (Child example) does not? <!DOCTYPE html> <html> <head> <title>Kid example</title> <style type="text/css"> #navMenuDiv #subLevel { display: none; } </style> <script type="text/javascript"> function toggleDisplay() { var kid = document.getElementById('subLevel'); if (kid.style.display == "block") {kid.style.display = "none";} else {kid.style.display = "block";} } </script> </head> <body> <div id="navMenuDiv"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Visie op Fitness</a></li> <li><a href="#" onclick="toggleDisplay()">Activiteiten ↓</a> <ul id="subLevel"> <li><a href="#">Bodybuilding</a></li> <li><a href="#">Bodyshaping</a></li> <li><a href="#">Conditietraining</a></li> </ul> </li> </ul> </div> </body> </html> <!DOCTYPE html> <html> <head> <title>Child example</title> <style type="text/css"> #menuDiv #subLevel { display: none; } </style> <script type="text/javascript"> function openSubLevel() { var child = document.getElementById('subLevel'); if (child.style.display == 'none') {child.style.display = 'block';} else {return;} } function closeSubLevel() { var child = document.getElementById('subLevel'); if (child.style.display == 'block') {child.style.display = 'none';} else {return;} } </script> </head> <body> <div id="menuDiv"> <ul> <li><a href="#" onclick="closeSubLevel()">Home</a></li> <li><a href="#" onclick="closeSubLevel()">Visie op Fitness</a></li> <li><a href="#" onclick="openSubLevel()">Activiteiten ↓</a> <ul id="subLevel"> <li><a href="#">Bodybuilding</a></li> <li><a href="#">Bodyshaping</a></li> <li><a href="#">Conditietraining</a></li> </ul> </li> </ul> </div> </body> </html> Kid is a real toggle script (one link opens and closes), Child is a script with which clicking the parent link should open and clicking the other main menu items should close the nested menu. But only Kid works, while they are furthermore identical. Why would that be? Quote Link to comment Share on other sites More sharing options...
nogray Posted November 21, 2011 Share Posted November 21, 2011 When you try to access the style via object.style.property, the property has to be in an inline style (e.g. <ul style="display:none;">) or it has to be set via javascript before hand. If the property is in css class (or id), you need to search on how to get currentStyle properties. The other alternative to make your script easier is to remove the if statment. e.g. function closeSubLevel(){ document.getElementById('subLevel').style.display = 'none'; } Quote Link to comment Share on other sites More sharing options...
Frank P Posted November 21, 2011 Author Share Posted November 21, 2011 The other alternative to make your script easier is to remove the if statment. Actually, I already know that. But I'm working on more complicated DHTML matters that give me problems, and I have the distinct feeling that the matter of Javascript (not) being able to retrieve CSS values is the key to the solution. That's why I'm posting these two examples. Of which, like I said, one is working -- Kid. When you try to access the style via object.style.property, the property has to be in an inline style (e.g. <ul style="display:none;">) or it has to be set via javascript before hand. I read that elsewhere, too, but why then is Kid working? Kid doesn't have inline styles or the style set by JS beforehand - apart from the difference one-link toggle vs. multi-link toggle, Kid and Child are identical. Still, only Kid is working. Quote Link to comment Share on other sites More sharing options...
nogray Posted November 21, 2011 Share Posted November 21, 2011 In the kid example, when you first click on the link, the if statment fails (if (kid.style.display == "block")) because it can't get the style, so the script goes to the else statment and show the menu. After you set the value once using javascript, you can access it later on. If you switch the if/else statments and check for none first, you would have to click twice at the begining to open the menu. Quote Link to comment Share on other sites More sharing options...
Frank P Posted November 22, 2011 Author Share Posted November 22, 2011 Got it. Thanks, nogray! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.