2013-05-12 184 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