Jquery滑动菜单

时间:2013-05-12 20:10:33

标签: jquery if-statement menu slider

我试图用一个小按钮创建一个向下滑动的菜单。 它必须只有一个按钮,我无法计算if - height俚语。

<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

没关系,使用滚动代替幻灯片...... 错字,程序员的地狱。

2 个答案:

答案 0 :(得分:1)

你可以使用.css()我想如果($(“#menu”)。css(“height”)==“30px”)等给它一个镜头让我知道结果

答案 1 :(得分:0)

你必须使用.css来检查身高值。

试试这段代码:

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

<强> DEMO