[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 224
  • Last Modified:

Javascript Menu Tree Problem

I am using the following code to create a Menu Tree for my website. The problem is that when first loaded, it takes 2 clicks to expand. Any ideas? Any better coding ideas? Thanks alot!

<style>
body{
      font: 10pt Verdana,sans-serif;
      color: navy;
}

.text {
      font-family: Verdana;
      font-size: 10px;
}

.trigger{
      cursor: pointer;
      cursor: hand;
}
.branch{
      display: none;
      margin-left: 12px;
}
</style>

<script>

function Toggle(node)
{
      // Unfold the branch if it isn't visible
      if (node.nextSibling.style.display == 'none')
      {
            // Change the image (if there is an image)
            if (node.childNodes.length > 0)
            {
                  if (node.childNodes.item(0).nodeName == "IMG")
                  {
                        node.childNodes.item(0).src = "NOLINES_minus.gif";
                  }
            }

            node.nextSibling.style.display = 'block';
      }
      // Collapse the branch if it IS visible
      else
      {
            // Change the image (if there is an image)
            if (node.childNodes.length > 0)
            {
                  if (node.childNodes.item(0).nodeName == "IMG")
                  {
                        node.childNodes.item(0).src = "NOLINES_plus.gif";
                  }
            }

            node.nextSibling.style.display = 'none';
      }

}

</script>

<div class="trigger" onClick="Toggle(this)"><img src="nolines_plus.gif" border="0"> Click Me</div>

<span class="branch">
 <img src="joinbottom.gif"><a href="123.com">Coverage Modified</a><br>
 <img src="joinbottom.gif"><a href="123.com">Driver Added</a><br>
 <img src="joinbottom.gif"><a href="123.com">Vehicle Added</a><br>
</span>
0
yourbudweiser
Asked:
yourbudweiser
  • 2
  • 2
1 Solution
 
hernst42Commented:
Hi yourbudweiser,
instead of
> if (node.nextSibling.style.display == 'none')
try
if (node.nextSibling.style.display == 'none' || node.nextSibling.style.display == '')

Cheers!
0
 
dakydCommented:
If I'm not mistaken, that script won't work in the Mozilla-based browsers.  White space  creates a #text node in the DOM, so that nextSibling actually points to a text node, rather than to the <span>.  What's worse, text nodes have no style, so it'll throw out javascript errors.  You *can* account for these differences, but it involves rewriting a bit of your script.

And while we're talking about re-writing ... will something like the following help?  Your question reminded me of the suckerfish drop downs, so I rewrote what you had with the help of some CSS.  You essentially use lists to create your menu system, and then style the lists to make them look the way you want.  The javascript essentially just switches class names, letting the CSS do the rest.  It should work the same cross-browser, and also make your life easier by eliminating the need to walk the DOM.  Hope it helps.

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<style>
body{
     font: 10pt Verdana,sans-serif;
     color: navy;
}

.text {
     font-family: Verdana;
     font-size: 10px;
}

#nav, #nav ul {
     padding: 0;
     margin: 0;
     list-style: none;
}

#nav li {
     cursor: pointer;
     cursor: hand;
     display: block;
}

#nav li ul {
     display: none;
     margin-left: 12px;
}

#nav li.show ul {
     display: block;
}
</style>

<script type="text/javascript">
window.onload = initMenu;

function initMenu()
{
  var lis = document.getElementById("nav").getElementsByTagName("li");
  for (var i = 0, n = lis.length; i < n; i ++)
  {
    lis[i].onclick = toggle;
  }
}

function toggle()
{
  var imgs = this.getElementsByTagName("img");
  if (this.className.indexOf("show") > -1)
  {
    this.className = this.className.replace(/\s?show/, "");
    if (imgs.length > 0)
      imgs[0].src = "NOLINES_plus.gif";
  }
  else
  {
    this.className += " show";
    if (imgs.length > 0)
      imgs[0].src = "NOLINES_minus.gif";
  }
}
</script>
</head>

<body>
<ul id="nav">
  <li><img src="nolines_plus.gif" style="border: 0;" />Click Me
    <ul>
      <li><img src="joinbottom.gif"><a href="123.com">Coverage Modified</a></li>
      <li><img src="joinbottom.gif"><a href="123.com">Driver Added</a></li>
      <li><img src="joinbottom.gif"><a href="123.com">Vehicle Added</a></li>
    </ul>
  </li>
</ul>

</body>
</html>
0
 
yourbudweiserAuthor Commented:
Hey guys thanks for responding. Dakyd, although your script works perfectly as above, it doesn't work in the context of my page. I have alot of content between the trigger and branch. I have modified my original script and it now works perfectly. I appreciate your help, thanks!
0
 
hernst42Commented:
I object in this case, as the solution provided by me solved the problem (at least with the example that was given).
As the questioner said he modified his script (which way? maybe by the way I mentioned?). He might post his solution so this question can be closed with

 answerd himself refund the points
0
 
yourbudweiserAuthor Commented:
Hernst42 is right. For some reason, I didn't properly test his solution.

Thanks!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now