我从这里得到了下拉菜单3:http://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/
运行良好onclick,但我不知道如何让它在悬停时工作。
我对JS的尝试:
<script type="text/javascript">
function DropDown(el) {
this.dd = el;
this.placeholder = this.dd.children('span');
this.opts = this.dd.find('ul.dropdown > a');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('hover', function(event){
$(this).toggleClass('active');
return false;
});
obj.opts.on('hover',function(){
var opt = $(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text(obj.val);
});
},
getValue : function() {
return this.val;
},
getIndex : function() {
return this.index;
}
}
$(function() {
var dd = new DropDown( $('#dd') );
$(document).hover(function() {
// all dropdowns
$('.wrapper-dropdown-3').removeClass('active');
});
});
</script>
答案 0 :(得分:0)
我认为这应该有效:
$(function() {
var dd = new DropDown( $('#dd') );
$('.wrapper-dropdown-3').hover(function() {
$(this).toggleClass('active');
});
});
如果有任何问题,请说出来。
答案 1 :(得分:0)
尝试:
obj.dd.on('mouseenter', function(event){
$(this).toggleClass('active');
return false;
});
obj.opts.on('mouseleave',function(){
var opt = $(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text(obj.val);
});
答案 2 :(得分:0)
如果我没弄错的话,hover()函数会查找mouseover和mouseoff事件。为什么您希望菜单只在鼠标悬停在顶部的项目上时才会更改?鼠标移开后,它会改变。我建议只使用鼠标悬停,然后使用鼠标左键而不是悬停。