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 if时，无论如何它似乎都会失败。

想法或建议？

感谢！

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

使用原型的基本树结构导航

1 个答案: