[英]Using MouseOver and MouseOut
大家好,我正在我的第一个网站上工作,并尝试使用jquery
实现滑动菜单。
到目前为止,这是什么:
<a href="javascript:void(0);"onmouseover="ShowBox();" onmouseout="HideBox();"">Show box<a>
<script type="text/javascript">
function ShowBox()
{
$("#SlideMenu").slideDown();
}
function HideBox()
{
$("#SlideMenu").slideUp();
}
</script>
当我将鼠标悬停在控件上时,菜单会向下滑动,但会自动向上滑动。 我想要的是让用户有时间从菜单中进行选择和选择,如果他没有选择,我希望在鼠标离开控件后立即关闭菜单。
知道为什么这行不通吗? 提前致谢。
在没有内联JS的情况下进行操作,并记住关闭<a>
元素并使用ready函数
<a id="test">Show box</a>
<script type="text/javascript">
$(document).ready(function() {
$("#test").on({
mouseenter: function() {
$("#SlideMenu").slideDown();
},
mouseleave: function() {
$("#SlideMenu").slideUp();
},
click: function(e) {
e.preventDefault();
}
});
});
</script>
当您使用jQuery时,我相信使用类似以下内容将对您有所帮助:
$("#box").hover(
function() {
//.stop() to prevent propagation
$(this).stop().animate({"bottom": "200px"}, "fast");
},
function() {
$(this).stop().animate({"bottom": "0px"}, "fast");
}
);
这意味着当鼠标悬停在菜单上时,菜单将保持在打开位置。 当鼠标退出菜单时,它将关闭。 显然更改id和动画CSS值以满足您的需求:)!
这是一个工作示例: http : //jsfiddle.net/V3PYs/1/
此处确实没有问题-脚本完全按照您的指示进行。 然而,从我的理解,你想要的是当你离开“触发器”元素,如果用户的鼠标现在是在菜单中的菜单保持打开状态。 尝试这个:
<script type="text/javascript">
var timeout=250;//timeout in milliseconds to wait before hiding the menu
var menuMouseout;
$(document).ready(function() {
$("#trigger").hover(function(){
$("#SlideMenu").slideDown();
}, function(){
menuMouseout=setTimeout("$('#SlideMenu').slideUp();", timeout);
});
$("#SlideMenu").hover(function(){
clearTimeout(menuMouseout);
}, function(){
menuMouseout=setTimeout("$('#SlideMenu').slideUp();", timeout);
});
});
</script>
这样,在将鼠标悬停在触发元素之外以进入菜单后,用户会停留一段时间。 您可能需要摆弄超时,但这应该可以工作。 我对此进行了测试,它似乎正在工作。 只要确定,如有必要,将其包装在$(document).ready
,以确保所有元素都已加载并准备就绪。
如果您使用的是jQuery,这将是解决问题的正确方法:
<a href="#" id="showBoxHref">Show box</a>
<script type="text/javascript">
$("#showBoxHref").hover(function() {
$(this).slideDown();
}, function() {
$(this).slideUp();
});
</script>
(只需将其复制/粘贴到其中,它就可以正常工作)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.