<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>jquery.slidingdrawer Demo</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function tt() {
$(".drawer-content").toggle(function() {
//alert("toggle");
if ($("#ff").html() == "显示") {
$("#ff").html("隐藏")
} else {
$("#ff").html("显示")
}
});
}
</script>
<style type="text/css">
.body {
left: 0dp;
right: 0dp;
margin-left: 0dp;
margin-right: 0dp;
}
.drawer {
width: 100%;
height: auto;
background: transparent;
position: fixed;
z-index: 2;
}
.drawer-content {
width: 100%;
height: auto;
background: #0f0;
}
.drawer-handle {
width: 100%;
height: auto;
background: transparent;
}
</style>
</head>
<body>
aaaaaa
<br>
<div class="drawer">
<div class="drawer-content">
<h1 style="color: #f00">Hello World</h1>
<a href="#">fdfdsfsdafsdf</a>
</div>
<div class="drawer-handle" align="center">
<a href="#" id="ff" οnclick="tt()">显示</a>
</div>
</div>
<div>
bbbb<br>d fdsafdsfas<br> <br>d fdsafdsfas<br>
<br>d fdsafdsfas<br> <br>d fdsafdsfas<br> <br>d
fdsafdsfas<br> <br>d
</div>
</body>
</html>
效果
449
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
