jQuery 效果 向上向下以及切换滑动如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(
function()
{
$(".flip").click(
function()
{
$(".panel").slideDown("slow");
}
);
}
);
$(document).ready(
function()
{
$(".into").click(
function(){
$(".into1").slideUp("slow");
}
);
}
);
$(document).ready(
function()
{
$(".inout").click(
function(){
$(".inout1").slideToggle();
}
);
}
);
</script>
<style type="text/css">
div.panel,div.into1,div.inout1,p.flip,p.into,p.inout{
margin: 0px;
padding: 5px;
text-align: center;
background: #e5eecc;
border: solid 1px #c3c3c3;
}
div.panel{
display: none;
height: 120px;
}
div.into1,div.inout1{
height: 120px;
}
</style>
</head>
<body>
<div class="panel">
<p>技术站点(一)出来</p>
<p>技术站点(二)出来</p>
</div>
<p class="flip">点击一下就出来</p>
<p><br>
<p class="into"> 点击一下就进去</p>
<div class="into1">
<p >技术站点(一)进去</p>
<p >技术站点(二)进去</p>
</div>
<p><br>
<p class="inout">点击一下进去和出来切换</p>
<div class="inout1">
<p>技术站点(一)进去和出来</p>
<p>技术站点(二)进去和出来</p>
</div>
</body>
</html>