не могу заставить mootools 1.4.1 вызвать <DIV>, чтобы появиться - PullRequest
Новая
       22

не могу заставить mootools 1.4.1 вызвать <DIV>, чтобы появиться

0 голосов
/ 22 ноября 2011

Я пытаюсь получить приведенный ниже код для выполнения события, которое срабатывает, когда пользователь наводит указатель мыши на ссылку. Событие, которое я хотел бы вызвать, состоит в том, что DIV появляется, когда пользователь наведен на ссылку, и исчезает, когда пользователь убирает мышь из меню. (Предполагается, что для подменю в навигации верхнего уровня.) Однако происходит событие mouseover, но не событие mouseout. Это меня немного смущало. 

function menuBehavior() {
  var subMenu = $$('.has_menu').getChildren('A')[0];

  window.addEvent('domready', 
      function() {
          subMenu.addEvent('mouseover', 
                function()  {
                    this.getSiblings('.menu-level_2').addEvent('mouseover', 
                        function(e) {
                            this.getSiblings('.menu-level_2').setStyle('opacity', 1);
                            e.stop();
                    });

                    this.getSiblings('.menu-level_2').addEvent('mouseout', 
                        function(e) {
                            this.getSiblings('.menu-level_2').setStyle('opacity', 0);
                            e.stop();
                        });
                });
    });
} // end of FUNCTION menuBehavior

также приведен HTML-код для макета меню. 

<li class="menu-option has_menu">
    <a href="#option1"><span class="menu-arrow">Menu Option #1</span></a>
        <div class="menu-level_2">
            <ul class="level_2">
                <li class="more">
                    <a href="#sub_menu1"><span class="menu_level_2-more">Sub Menu Option #1</span></a>
                    <div class="bumper">
                        <div class="menu-level_3">
                            <ul class="level_3">
                                <li>
                                    <a href="#sub_menu1"><span class="menu_level_3">Sub Menu Option #1</span></a>
                                </li>
                                <li class="option-spcr">&nbsp;</li>
                                <li>
                                    <a href="#sub_menu1" class="menu_level_3"><span>Sub Menu Option #2</span></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li class="option-spcr">&nbsp;</li>
                <li>
                    <a href="#sub_menu1" class="menu_level_2"><span>Sub Menu Option #2</span></a>
                </li>
                <li class="option-spcr">&nbsp;</li>
                <li>
                    <a href="#sub_menu1" class="menu_level_2"><span>Sub Menu Option #3</span></a>
                </li>
                <li class="option-spcr">&nbsp;</li>
                <li>
                    <a href="#sub_menu1" class="menu_level_2"><span>Sub Menu Option #4</span></a>
                </li>
                <li class="option-spcr">&nbsp;</li>
                            <li>
                                <a href="#sub_menu1" class="menu_level_2"><span>Sub Menu Option #5</span></a>
                </li>
            </ul>
        </div>
    </li>

Заранее спасибо за любые мысли или идеи о том, как исправить этот код.

1 Ответ

1 голос
/ 23 ноября 2011

OK, во-первых, все это можно сделать с помощью CSS, однако вам потребуется множество изменений разметки.

Если вы настаиваете на пути, по которому вы находитесь, код mootools будет выглядеть примерно так:1004 *

Однако, основываясь на вашей разметке HTML, это не будет работать, так как вы будете вставлять из тега A сразу после ввода DIV

. Было бы лучше удалить div и прикрепитьсобытие для тега LI, и тег UL появится на MOUSEENTER и скроет тег UL на MOUSELEAVE

Я надеюсь, что вы направите вас в правильном направлении

...