网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发  > jQuery

jQuery实现菜单的显示隐藏上下滑动效果

2021/9/16 22:15:51

菜单选项的显示和隐藏上下滑动效果是我们在做网站时经常用到的效果,今天我们就来看一个使用jQuery实现菜单显示隐藏上下滑动的例子。<!DOCTYPE html><html><head><meta charset="utf-8"><title>jQuery实现菜单的显示隐藏上下滑动…

        菜单选项的显示和隐藏上下滑动效果是我们在做网站时经常用到的效果,今天我们就来看一个使用jQuery实现菜单显示隐藏上下滑动的例子。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery实现菜单的显示隐藏上下滑动效果—www.woaidaogu.com</title>
<script src="scripts/jquery/jquery-1.11.2.min.js"></script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
 
<div id="flip">我是菜单</div>
<div id="panel">菜单选项一</div>
</body>
</html>

image.pngimage.png

        通过以上内容我们知道了jQuery实现菜单的显示隐藏上下滑动效果,感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!

相关资讯

    暂无相关的数据...