相信很多人已经见过jQuery 手风琴的效果，jQuery 手风琴效果在展示网页内容时更好的利用了网页空间，显得别具一格。今天就让我们来看看怎么一步一步实现jQuery 手风琴效果，最终的效果如下图：
首先，我们看看html标记，如下：
| 代码如下 | 复制代码 |
|
<div id="accordion"> <h2><a href="#"></a></h2> <div class="item"> <a target="_blank" href="#"><img src="" alt="" /></a> <p></p> </div> <!--more item--> </div> |
|
可见，使用的html还是挺明了的。CSS样式在这里就不给出了，大家可以在Demo页中查看源文件找到。下边我们重点看看jQuery 手风琴代码实现部分。直接给出jQuery代码如下：
| 代码如下 | 复制代码 |
|
$(document).ready(function () { //先隐藏所有Item $(".item").hide(); //显示第一个Item $(".item:first").show(); $("#accordion h2").click(function () { //如果当前Item是隐藏 if ($(this).next().is(":hidden")) { //先slideUp所有Item $(".item").slideUp(); //slideDown当前Item $(this).next().slideDown(); } }); }) |
|
核心代码讲完了，我们可看完整实例
| 代码如下 | 复制代码 |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>jQuery 手风琴效果-jQuery在线演示-jQuery学习</title> <link href="/Stylesheet_min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #accordion{margin:0 auto;width:400px;} #accordion h2{ background:#0066FF 0 0; float:left; font-size:18px; font-weight:normal; height:30px; line-height:30px; margin:0 0 3px; width:400px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #accordion h2 a{ color:White; display:block; font-size: 16px; text-decoration:none; padding-left:10px; outline:none; } #accordion h2 a:hover{ color:Yellow; cursor:pointer; } .current{ color:Yellow; } .item{ clear:both; margin: 0 0 3px; overflow: hidden; font-size: 14px; width: 398px; background: #f0f0f0; border: 1px solid #CCC; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .item img{ border:none; float:left; margin:10px 5px 5px; } .item p{ margin-top:5px; padding:0 10px 0 135px; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { //先隐藏所有Item $(".item").hide(); //显示第一个Item $(".item:first").show(); $("#accordion h2").click(function () { //如果当前Item是隐藏 if ($(this).next().is(":hidden")) { //先slideUp所有Item $(".item").slideUp(); //slideDown当前Item $(this).next().slideDown(); } return false; }); }) </script> </head> <body> <div id="page-wrap"> <div id="content-wrap"> <div id="content-left" class="demo"> <div id="accordion"> <h2><a href="#">jQuery Opacity图片聚焦效果</a></h2> <div class="item"> <a target="_blank" href="/jquery-use-opacity-show-focus.html"><img src="/images/demo/jquery-opacity.jpg" alt="jQuery Opacity图片聚焦效果" /></a> <p>前些天在一个网站上看到使用Opacity实现的效果，当用户光标停留在某个图片上时，其余图片改为半透明状态，使得我们目光停留在当</p> </div> <h2><a href="#">jQuery插件-显示图片缩略图</a></h2> <div class="item"> <a target="_blank" href="/use-jquery-plugin-to-show-thumbnail-gallery.html"><img src="/images/demo/thumbnai.jpg" alt="jQuery插件-显示图片缩略图" /></a> <p>今天，我们看看使用一个jQuery插件，实现图片缩略图的显示，并查看大图片。这样，当显示的图片非常大时，很有必要显示一张小图</p> </div> <h2><a href="#">jQuery移动listbox的值</a></h2> |
|
时间： 2025-01-21 02:45:50