JQuery slideToggle 演示简单的 Slide Panel 效果。

------------------html---------------------------------

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <link href="stlye/StyleSheet.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/panel_hide.js" type="text/javascript"></script>   

</head> 
<body> 
<div class="panel">
<p>123456</p>
<p>123456789</p>
</div> 
<p><span class="flip">请点击这里</span></p>
 </body>
</html>

 

------------panel_hide.js-------------------------


   

 $(document).ready(function () {
        $(".flip").click(function () {
            $(".panel").slideToggle("slow");//参数有四: slow ,normal,fast,或者自定义(单位:毫秒)
        });
    });

 


----------StyleSheet.css---------------------

body {
}
div.panel,span.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
p
{
    text-align:center;
    }
div.panel
{
height:120px;
display:none;
}

 

 

posted @ 2013-10-19 10:17  kongfl888  阅读(383)  评论(0)  编辑  收藏  举报