JQuery实现下拉面板

最新推荐文章于 2024-04-16 09:38:10 发布

zhiguo2008

最新推荐文章于 2024-04-16 09:38:10 发布

阅读量1.8k

点赞数

分类专栏： AJAX 文章标签： jquery function url class c

AJAX 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

 
   <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Simple Slide Panel</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".btn-slide").click(function(){
  $("#panel").slideToggle("slow");
  $(this).toggleClass("active"); return false;
 });
  
});
</script>
<style type="text/css">
body {
 margin: 0 auto;
 padding: 0;
 width: 570px;
 font: 75%/120% Arial, Helvetica, sans-serif;
}
a:focus {
 outline: none;
}
#panel {
 background: #754c24;
 height: 200px;
 display: none;
}
.slide {
 margin: 0;
 padding: 1;
 border-top: solid 4px #422410;
 background: url(images/btn-slide.gif) no-repeat center top;
}
.btn-slide {
 background: url(images/white-arrow.gif) no-repeat right -50px;
 text-align: center;
 width: 144px;
 height: 31px;
 padding: 10px 10px 0 0;
 margin: 0 auto;
 display: block;
 font: bold 120%/100% Arial, Helvetica, sans-serif;
 color: #fff;
 text-decoration: none;
}
.active {
 background-position: right 12px;
}
</style>
</head>
<body>
<div id="panel">
 <!-- you can put content here -->
</div>
<p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p>
</body>
</html>
 