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

发布于 2024-07-13 14:00:57 字数 1508 浏览 6 评论 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 的子项时，但我不知道有任何其他方法可以做到这一点。我不是编码员，因此非常感谢任何帮助。谢谢！

原文

I'm trying to target a UL that's inside a LI and I'm having trouble. Here's the 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>

and here's the 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!");
    });
});
}

I think the problem is when I try to get the child of the LI by using el.getChild('dropdown'), but I don't know any other ways to do this. I'm not a coder so any help is appreciated. Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

心如狂蝶 2024-07-20 14:00:58

可能导致问题的是您的重复 ID。 id 在整个页面中只能使用一次。因此，超过 1 个

如果您想保留重复项，请尝试 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 不是很熟悉。
正如你可能知道的那样。 ;)

Something that may be causing issues are your duplicate ids. An id should only be used once throughout the page. So, having more than 1 <ul id="dropdown"> is invalid HTML and may give you unwanted results with libraries.

If you want to keep duplicates, try name or class attributes.

Now, I'm not sure if it might've changed between releases, but I'm only finding the plural getChildren in the docs.

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

But, then again, I'm not very familiar with Mootools.
As you can probably tell. ;)

回复收藏 0 原文

萝莉病 2024-07-20 14:00:58

您可以使用 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!");
        });
    });
});

You could use the getFirst-method instead of 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!");
        });
    });
});

回复收藏 0 原文

~没有更多了~