似乎无法让 mootools 1.4.1 触发出现

Question

我试图获取下面的代码来执行一个事件，该事件在用户将鼠标悬停在链接上时触发。我想要触发的事件是，一旦用户将鼠标悬停在链接上，DIV 就会出现，而一旦用户将鼠标移离菜单，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 标签

我希望这能让您指向正确的方向