大家好我正在我的第一个网站上工作,我试图用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>
当我将鼠标移到控件上时,我的菜单会向下滑动,但会自动向上滑动。 我想要的是让用户有时间从菜单中选择和选择,如果他没有,我希望菜单在鼠标离开控件时立即关闭。
知道为什么这不起作用? 提前谢谢。
答案 0 :(得分:2)
在没有内联JS的情况下执行您的操作,并记住关闭<a>
元素并使用就绪函数
<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>
答案 1 :(得分:1)
当你使用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/
答案 2 :(得分: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
中,以确保所有元素都已加载并准备就绪。
答案 3 :(得分:0)
如果你正在使用jQuery,这将是正确的方法:
<a href="#" id="showBoxHref">Show box</a>
<script type="text/javascript">
$("#showBoxHref").hover(function() {
$(this).slideDown();
}, function() {
$(this).slideUp();
});
</script>
(只需将其复制/粘贴即可使用)