Mootools - Таргетинг на дочерние элементы с помощью селектора .each - PullRequest
Новая
       24

Mootools - Таргетинг на дочерние элементы с помощью селектора .each

0 голосов
/ 28 января 2009

Я пытаюсь нацелиться на UL, который находится внутри 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!");
    });
});
}

Я думаю, что проблема в том, когда я пытаюсь получить дочерний элемент LI с помощью el.getChild ('dropdown'), но я не знаю других способов сделать это. Я не кодер, поэтому любая помощь приветствуется. Спасибо!

Ответы [ 2 ]

2 голосов
/ 28 января 2009

Вы можете использовать метод 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!");
        });
    });
});
2 голосов
/ 28 января 2009

Что-то, что может вызывать проблемы, - ваши дублирующиеся идентификаторы. 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.
Как вы, вероятно, можете сказать. ;)

...