javascript - 下拉菜单在子菜单上消失

Question

我创建了自己的下拉菜单类，但这里存在一些错误。当我在子菜单上拖动鼠标时，所有菜单都消失了。这是我的 mootools 代码:

    var DynamicMenu = new Class({

    initialize: function(el) {
        this.element = el;
        this.timer = null;

        this.element.addEvents({
            'mouseover': this.enter.bind(this),
            'mouseout': this.leave.bind(this)
        });

    },
    enter: function() {
        var that = this;
        this.timer = setTimeout(function(){
            $$(".top-nav")[0].addClass("index_1001");
            var columns = that.element.getChildren(".dropDownCol")[0];
            var catalog = that.element.getChildren(".dropDownCatalog")[0];
            if (columns != null) {
                columns.show();
            }
            if (catalog != null) {
                var columns2 = that.element.getChildren(".dropDownCatalog ul li .catalogNaviInner")[0];
                if (columns2 != null) {
                    columns2.show();
                }
                catalog.show();
            }
            if(columns != null || catalog != null){
                $$('div.wrapper.tal')[0].adopt(new Element('div', {
                    'class': 'owerlay'
                }));
            }
        },500);
    },
    leave: function() {
        this.stopTimer();
        if($$('.owerlay')[0] != null){
            $$('.owerlay').destroy();
        }
        $$(".top-nav")[0].removeClass("index_1001");
        var columns = this.element.getChildren(".dropDownCol")[0];
        var catalog = this.element.getChildren(".dropDownCatalog")[0];
        if (columns != null) {
            columns.hide();
        }
        if (catalog != null) {
            catalog.hide();
        }
    },
    stopTimer: function() {
        if (this.timer != null) {
            clearTimeout(this.timer);
            this.timer = null;
        }
    }
});

if ($$(".top-nav > li")[0] != null) {
   Array.each($$('.top-nav > li'), function(element){
      new DynamicMenu(element);
   });
}

这是我的 HTML 代码:

<ul class="block-list top-nav ">
   <li>
       <a class="topLink" href="/link" title="Menu"><span class="arrowDown">Menu Menu</span></a>
      <div class="dropDownCol" style="width: 190px; z-index: 1001; display: none;">
         <div class="fl column">
            <ul>
               <li class="groupHeading "><a href="/link">Menu 1</a></li>
            </ul>
            <ul>
               <li class="groupHeading "><a href="/link">Menu 2</a></li>
            </ul>
            <ul>
               <li class="groupHeading "><a href="/link">Menu 3</a></li>
            </ul>
            <ul>
               <li class="groupHeading "><a href="/link">Menu 4</a></li>
            </ul>
         </div>
         <div class="clear"></div>
      </div>
   </li>
</ul>

我在 finddle 中的所有工作代码:http://jsfiddle.net/UBuq5/8/

我哪里做错了？

Answer 1

您可能可以使用纯 CSS 来实现这一点。将以下内容添加到您的 CSS:

.dropDownCol {
  display: none;
}
.top-nav > li:hover .dropDownCol {
  display: block;
}

删除 JS，并从 .dropDownCol 中删除内联 display: none;。

这是一个更新的 fiddle :http://jsfiddle.net/UBuq5/10/

这不适用于触摸设备(无悬停)，但您可以通过在点击/点击时切换 hover 类并相应地更新 CSS 来模拟它。