您的位置：首页 > Web前端 > JQuery

Jquery实现点击后收缩功能

2013-01-25 20:40 239 查看

<html>

<head>

<script type="text/javascript" src="../jquery/jquery.js" tppabs="http://www.w3school.com.cn/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$(".flip").click(function(){

$(".panel").slideToggle("slow");

});

});

</script>

<style type="text/css">

div.panel,p.flip

{

margin:0px;

padding:5px;

text-align:center;

background:#e5eecc;

border:solid 1px #c3c3c3;

}

div.panel

{

height:120px;

display:none;

}

</style>

</head>

<body>

<div class="panel">

<p>Because time is valuable, we deliver quick and easy learning.</p>

<p>At W3School, you can study everything you need to learn, in an accessible and handy format.</p>

</div>

<p class="flip">Show/Hide Panel</p>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 收缩 Jquery

相关文章推荐

新的分享

章节导航