javascript - 使用原型(prototype)的基本树结构导航

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”，则不要触发。当我试图将其分解为 if else 时，无论如何它似乎都失败了。

想法或建议？

谢谢!

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