0

我正在尝试针对 LI 内的 UL，但遇到了麻烦。这是HTML：

<ul id="main_nav">
  <li class="main"><a href="#">Section 1</a>
    <ul id="dropdown">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 2</a></li>
    </ul>
  </li>

  <li class="main"><a href="#">Section 2</a>
    <ul id="dropdown">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 2</a></li>
    </ul>
  </li>

  <li class="main"><a href="#">Section 3</a></span>
   <ul id="dropdown">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 2</a></li>
    </ul>
  </li>

这是JS：

    window.addEvent('load', function() {
    $$('li.main').each(function(el){
    el.getChild('dropdown').addEvent('mouseenter',function(e){
        alert("over!");
    });
    el.getChild('dropdown').addEvent('mouseleave',function(e){
        alert("out!");
    });
});
}

我认为问题在于当我尝试使用 el.getChild('dropdown') 获取 LI 的孩子时，但我不知道有任何其他方法可以做到这一点。我不是编码员，因此不胜感激。谢谢！

4

2 回答 2

2

可能导致问题的是您的重复 ID。一个id应该只在整个页面中使用一次。因此，超过 1 个<ul id="dropdown">是无效的 HTML，并且可能会给您带来不需要的库结果。

如果要保留重复项，请尝试name或class属性。

现在，我不确定它是否可能在版本之间发生了变化，但我只在文档中找到了复数。 getChildren

window.addEvent('load', function() {
    $$('li.main').each(function(el){
        el.getChildren('.dropdown').addEvent('mouseenter',function(e){
            alert("over!");
        });
        el.getChildren('.dropdown').addEvent('mouseleave',function(e){
            alert("out!");
        });
    });
});

但是，话又说回来，我对 Mootools 不是很熟悉。
正如你可能知道的那样。;)

于 2009-01-28T00:18:32.687 回答
2

您可以使用 getFirst 方法而不是 getChild：

window.addEvent('load', function() {
    $$('li.main').each(function(el){
        el.getFirst().addEvent('mouseenter',function(e){
            alert("over!");
        });
        el.getFirst().addEvent('mouseleave',function(e){
            alert("out!");
        });
    });
});
于 2009-01-28T09:16:32.617 回答