Basic nav tree structure using prototype

Question

hope someone can help. I am trying to mess with Prototype JS and wonder about the underlying folding structure I'm trying to build.

The following works well, except for one. I would like JS to determine if the child or the "next" DOM ​​is empty so as not to fire.

The code:

Event.observe(document, 'dom:loaded', function() {  
 $$('#leftnav li a').each(function(element) {  
  Event.observe(element, 'click', function(event){ 
  Event.stop(event);
  Event.element(event).next(0).toggle(); 
  Event.element(event).up(0).toggleClassName('active');
  }, 
  false);             
 });  
});

So, if there is no "UL" attached, do not shoot. When I try to break it down, unless otherwise, it seems to fail, no matter what.

Thoughts or suggestions?

Thank you !

Answer 1

Assuming your HTML looks something like this:

  <div id="leftnav">
    <ul>
      <li>
        <a>Section A</a>
        <ul>
          <li>
            <a>Subsection A.1</a>
          </li>
        </ul>
      </li>
      <li>
        <a>Section B</a>
      </li>
    </ul>
  </div>

, javascript :

Event.observe(document, 'dom:loaded', function() 
{  
  $$('#leftnav li a').each(function(anchor) 
  {  
    anchor.observe('click', function(e)
    { 
      e.stop();
      var el = e.element();
      var next = el.next('ul');
      if (next)
      {
        next.toggle();
      }
      el.up('li').toggleClassName('active');
    });             
 });  
});