Question

我正在尝试将目标锁定在LI内部并且我遇到了麻烦。这是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的孩子时，但我不知道有任何其他方法可以做到这一点。我不是编码员，所以任何帮助都表示赞赏。谢谢！

Answer 1

可能导致问题的是您的重复ID。 id只应在整个页面中使用一次。因此，拥有多个<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不是很熟悉你可能会说。 ;）

Answer 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!");
        });
    });
});

Mootools - 使用.each选择器定位子元素

2 个答案: