日期:2014-05-16 浏览次数:20526 次
<!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> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <style> ul li{ width:100px; border:#CCC solid 1px; cursor:pointer} ul li span{ width:100px; height:20px; background:#CCCCCC; display:inline-block} ul li ul{ display:none} </style> </head> <script> $(function(){ D_Span = $("ul li span"); D_Ul = $("ul li ul"); D_Span.attr("s","y"); D_Span.bind('click',function(){ var y = $(this).attr("s"); if(y == "y"){ D_Ul.not($(this)).slideUp(); $(this).next("ul").slideDown(); $(this).attr("s","n"); } else if(y == "n"){ $(this).next("ul").slideUp(); $(this).attr("s","y"); } }); }) //end </script> <body> <ul> <li><span>1</span> <ul> <li>A</li> <li>B</li> <li>C</li> </ul> </li> <li><span>2</span> <ul> <li>A</li> <li>B</li> <li>C</li> </ul> </li> <li><span>3</span> <ul> <li>A</li> <li>B</li> <li>C</li> </ul> </li> </ul> </body> </html>