jQuery简单动画

来源：互联网发布：c语言技术论坛编辑：程序博客网时间：2024/06/15 03:00

<!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="../js/jquery-1.10.2.js"></script></head><body><script type="text/javascript"></script><!-- 收缩展开效果 --><div class="box">    <h1>收缩展开效果</h1><div id="menu1">        1<br />        2<br />        3<br />        4<br />        5<br /></div></div><br /><div id="menu2">    <h1>收缩展开效果</h1><div class="text">        1<br />        2<br /></div></div><div id="menu3">    <h1>收缩展开效果</h1><div class="text">        1<br />        2<br /></div></div></body>   <script language="JavaScript">$("h1").each(function(index,domEle){//这个地方需要遍历设置click事件,否则点击其中一个h1,所有h1都会触发事件$(domEle).click(function(){$(domEle).next().slideToggle("fast");});});   </script></html>

点击前：

点击后：