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，并从display: none;删除内联.dropDownCol。

这是一个更新的小提琴：http://jsfiddle.net/UBuq5/10/

这不会对触摸设备起作用（不悬停），但您可以通过点击/点按切换hover类并相应地更新CSS来模拟它。

下拉菜单在子菜单上消失

1 个答案: