似乎无法让 mootools 1.4.1 触发 <DIV> 出现

Question

我正在尝试获取下面的代码来执行一旦用户将鼠标悬停在链接上就会触发的事件。我希望触发的事件是，一旦用户将鼠标悬停在链接上，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>

提前感谢您对如何修复此代码的任何想法或见解。

Answer 1

首先，这一切都可以通过 CSS 完成，但是您需要对标记进行大量更改。

如果你坚持你在 mootools 上的路径，代码看起来更像：

window.addEvent('domready', function(){
    $$('.has_menu > a').each(function(el){
        el.addEvents({
            'mouseover': function(e) {
                el.getFirst('div').setStyle('opacity', 1);
            },
            'mouseout': function(e) {
                el.getFirst('div').setStyle('opacity', 0);
            }
        });
    })
});

但是，根据您的 HTML 标记，这将不起作用，因为您将在输入 DIV 后立即将鼠标移出 A 标记

您最好删除 div 并将事件附加到 LI 标签，并让 UL 标签出现在 MOUSEENTER 上，并在 MOUSELEAVE 上隐藏 UL 标签

我希望你能指出正确的方向