这个是用列表来制作的简单的折叠效果。
<!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>无标题文档</title> <style type="text/css"> .top{ width:500px; margin:0 auto; } .plus{ list-style-image:url(1.jpg);/*这些是列表前面的标识，这里设成了图片*/ } .min{ list-style-image:url(2.jpg); } .none{ list-style-image:none; } ul li{ margin-top:10px; } </style> <script src="jquery-2.1.3.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('.drink').children().hide(); $('.drink').children().addClass("none"); $('.drink').addClass('plus'); $('.drink').click(function(event){ if(this==event.target){ /*这里是比较关键的，用event.target来获取点击事件的元素 */ if($(this).is('.plus')){ /*如果点击事件的元素的css样式是等于'.plus'的，那就说明该 列表没有展开，我们接下来的工作就是将列表展开。*/ $(this).removeClass('plus'); $(this).addClass('min'); $(this).children().show(); } else{ /*否则我们就要将该列表进行折叠*/ $(this).removeClass("min"); $(this).addClass("plus"); $(this).children().hide(); } } }); }); </script> </head> <body> <div class="top"> <ul> <li class="drink">Tea <ul><li>Dar</li> <li class="drink">Assam <ul><li>Green</li> <li>Herbal</li></ul></li> <li>Herala</li> </ul> <li class="drink">Coffee <ul> <li>Cochin</li> <li>Kerala</li> </ul> </li> </ul> </div> </body></html>
