在一开始使用jq编写一个简单的下拉列表时,会发现,这个下拉列表会有反复下拉的问题
其实就是mouseenter和mouseleav事件反复进行,而造成了事件的堆积,所以才会反复下拉
可以看看一开始有问题的代码是这样的
$(".biao li").mouseenter(function() {
$(this).children("ul").slideDown();
})
$(".biao li").mouseleave(function() {
$(this).children("ul").slideUp();
});
这样子的代码会造成事件的堆积,反复下拉
而解决这个问题的方法很简单
只要使用到stop函数就好了
$(".biao li").mouseenter(function() {
$(this).children("ul").stop(true).slideDown();
});
$(".biao li").mouseleave(function() {
$(this).children("ul").stop(true).slideUp();
});
这段代码的意思就是,在下滑或者上滑之前,先stop在该下拉元素上的动画,然后再进行slideup或者slidedown动画。
注意:
这个stop函数应该在你的动画之前,相当于清除之前的堆积动画,再执行,如果stop()是在sil