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标签

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

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

1 个答案: