下拉菜单在子菜单上消失
下拉菜单在子菜单上消失
提问于 2014-07-24 14:15:49
我创建了自己的下拉菜单类，但这里有一些bug。当我在子菜单上拖动鼠标时，所有菜单都会消失。下面是我的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/
我哪里做错了？
回答 1
Stack Overflow用户
发布于 2014-07-24 14:40:26
您可以使用纯CSS来实现这一点。将以下内容添加到CSS中：
.dropDownCol {
display: none;
}
.top-nav > li:hover .dropDownCol {
display: block;
}删除JS，同时从.dropDownCol中删除内联display: none;。
这里有一个更新的小提琴：http://jsfiddle.net/UBuq5/10/
这在触摸设备上不起作用(没有悬停)，但你可以通过点击/点击切换hover类并相应地更新CSS来模拟它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24926364
复制相关文章
相似问题
腾讯云开发者
