базовая древовидная структура с использованием прототипа

Question

надеюсь, кто-то может помочь. Я пытаюсь поиграться с Prototype JS и у меня есть вопрос об основной складной структуре навигации, которую я пытаюсь построить.

Следующее работает хорошо, за исключением одной вещи. Я хотел бы, чтобы JS идентифицировал, является ли дочерний или следующий элемент DOM пустым, чтобы не запускаться.

Код:

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);             
 });  
});

Так что, если нет вложенного «UL», не стреляйте. Когда я пытаюсь разбить это на что-то еще, кажется, что это не сработает, несмотря ни на что.

Мысли или предложения?

Спасибо !

Answer 1

Предполагая, что ваш HTML выглядит примерно так:

  <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');
    });             
 });  
});