所以我正在为某个人创建一个网站,我对jQuery很新(可能没有用)。该网站需要一个下拉菜单,以显示列表中的图库链接,而不是在导航栏中显示所有链接。问题是,每当我将鼠标悬停在li元素上时,下拉列表会向下滑动,但当我将鼠标悬停在下拉列表上时,它会向下滑动。
$(document).ready(function () {
$("li#navi-dropdown").hover(
function () {
$('ul.nav-dropdown').slideDown('medium');
},
function () {
$('ul.nav-dropdown').slideUp('medium');
}
);
});
可能很简单,但非常欢迎帮助。 JSFiddle如下。
答案 0 :(得分:2)
您正在处理我的处理程序中的事件,您需要这样做:
$(document).ready(function () {
$("li#navi-dropdown").on('mouseover',function () {
$('ul.nav-dropdown').slideDown('medium');
})
$("ul.nav-dropdown").on('mouseleave',function () {
$('ul.nav-dropdown').slideUp('medium');
});
});
我还更新了你的小提琴,检查它现在有效。
这是我的小提琴:
答案 1 :(得分:1)
考虑将你的ul子菜单放在你的li中,然后重新定位它。 不要忘记使用.stop(),因为jquery不会对幻灯片动画进行排队:
$('ul.nav-dropdown').stop().slideDown('medium');
答案 2 :(得分:0)
尝试使用此代码。
$(document).ready(function () {
$("li#navi-dropdown").hover(
function () {
$('ul.nav-dropdown').slideDown('medium');
});
$(".nav-dropdown").mouseleave(
function () {
$('ul.nav-dropdown').slideUp('medium');
});
});