请教一代码

zlcqupt 2010-01-27 11:04:58



<!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="common/jquery-1.2.6.min.js"></script>

<link type="text/css" rel="stylesheet" href="common/common.css" />

<style>

/* 收缩展开效果 */

.text{line-height:22px;padding:0 6px;color:#666;}

.box h1{padding-left:10px;height:22px;line-height:22px;background:#f1f1f1;font-weight:bold;}

.box{position:relative;border:1px solid #e7e7e7;}

</style>

</head>

<body>

<script type="text/javascript">

// 收缩展开效果

$(document).ready(function(){

   $(".box h1").toggle(function(){

     $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");

   },function(){

		 $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");

   });

});

</script>

<!-- 收缩展开效果 -->

<div class="box">

    <h1>收缩展开效果</h1>

	<div class="text">

        1<br />

        2<br />

        3<br />

        4<br />

        5<br />

	</div>

</div>



<br />



<div class="box">

    <h1>收缩展开效果</h1>

	<div class="text">

        1<br />

        2<br />

	</div>

</div>



</body>

</html>

请问，红色的这部分的代码，为什么是重复的一遍？

再问一下，感觉ajax和jquery的代码太难了，不知道应该怎么学？
有什么好的入门或者提高的书来看看吗？

...全文

59 5 打赏收藏举报

写回复

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

zlcqupt 2010-01-27

打赏
举报



$(document).ready(function(){

   $(".box h1").toggle(function(){

     $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");

   },function(){

         $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");

   });

});

这里toggle函数是页面加载后就直接调用呢，还是当有相应的事件发生时才调用？

zlcqupt 2010-01-27