2013-05-12 146 views
0

我试图创建一个向下滑动菜单,一个小按钮。 它必须只有一个按钮,我不能制定if - 高度俚语。jquery滑动菜单

<html> 
<head> 
<link href="menu.css" rel="stylesheet" type="text/css"> 
<script src="jquery-1.9.1.min.js"></script> 
<script language="javascript"> 
$(document).ready(function(){ 
    $("#button").click(function() { 
    if ($("#menu").is("height:30px")) { 
    $("#menu").animate({"height":"500px"}, 500); 
    } else { 
    $("#menu").animate({"height":"30px"}, 500); 
    } 
}); 
}); 
</script> 
</head> 
<body bgcolor="#CCCCCC"> 
<button id="button" value="littlebutton"></button> 
<div id="menu">this is the menu</div> 
</body> 
</html> 

我一直在使用谷歌搜索,并在即时通讯有点匆忙。

问候,克里斯。

编辑:

现在的第一部分已经完成,我想剩下的不会是很难做到的自己。 我需要其中的文字,但文字不滚动,它只是隐藏。

<!DOCTYPE html> 
    <html> 
    <head> 
    <link href="menu.css" rel="stylesheet" type="text/css"> 
    <script src="jquery-1.9.1.min.js"></script> 
    <script language="javascript"> 
$(document).ready(function(){ 
    $("#button").click(function() { 
    if ($("#menu").css("height")=="30px") { 
    $("#menu").animate({"height":"275px"}, 500); 
    $("#text").scrollDown(500); 
    } else { 
    $("#text").scrollUp(500); 
    $("#menu").animate({"height":"30px"}, 500); 

    } 
}); 
}); 
    </head> 
    <body bgcolor="#CCCCCC"> 

    <div id="menu">this is the menu <button id="button" value="littlebutton"></button><div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed magna quis arcu lacinia euismod ac blandit nunc. Proin sit amet risus turpis, quis tempor magna. Aliquam erat volutpat. Vestibulum ac risus leo, quis eleifend tellus. Sed eu vestibulum justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra.</div></div> 
    </body> 
    </html> 

我还需要文本“下滑/滚动”时底部命中。 如何做到这一点?

EDIT2

没关系,用滚动代替滑动...... 错字,程序员的地狱。

回答

1

可以使用的CSS()我想如果($(“#菜单”)。CSS(“高”)==“30像素”)等给它一个镜头,让我知道结果

+1

这工作,感谢您的答复! – 2013-05-12 20:29:50

+0

不客气:) – 2013-05-12 21:05:49

0

您必须使用.css来检查高度值。

试试这个代码:

$("#button").click(function() { 
    if ($("#menu").css("height")=="30px") { 
    $("#menu").animate({"height":"500px"}, 500); 
    } else { 
    $("#menu").animate({"height":"30px"}, 500); 
    } 
}); 

DEMO

+0

感谢alessandro,工作! – 2013-05-12 20:22:56