帮我改进一下这个jquery代码
我做了一个jquery效果，点击下拉，显示更多，同时下拉按钮变向上按钮，点击隐藏。具体效果见我博客右边栏：http://tanteng.sinaapp.com
我右边有三个这样的效果，我定义三个不同的id，所以写jqeury基本都是分别写同样的效果，能不能用一种方法写到一起呢？？
html代码：
<div class="widget" id="diary1"> <h3><?php _e('Random Posts', 'zbench'); ?></h3> <ul> <?php $rand_posts = get_posts('numberposts=16&orderby=rand'); foreach( $rand_posts as $post ) : ?> <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li> <?php endforeach; ?> </ul> <span class="more_article1"><a href="#"><img src="http://tanteng.sinaapp.com/wp-includes/images/widget_btn_down.png"></a></span> </div><?php } ?> <!--显示个人日志--> <div class="widget" id="diary2"> <h3>个人日志</h3> <ul> <?php $person_posts = get_posts('numberposts=16&category=5'); foreach( $person_posts as $post ) : ?> <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li> <?php endforeach; ?> </ul> <span class="more_article2"><a href="#"><img src="http://tanteng.sinaapp.com/wp-includes/images/widget_btn_down.png"></a></span> </div> <!--显示和隐藏效果--> <script type="text/javascript"> $(document).ready(function(){ var $hiden1=$("#diary1 ul li:gt(7)"); var $hiden2=$("#diary2 ul li:gt(7)"); var $hiden3=$("#diary3 ul li:gt(7)"); $hiden1.hide(); $hiden2.hide(); $hiden3.hide(); var $more1=$(".more_article1"); var $more2=$(".more_article2"); var $more3=$(".more_article3"); $(".more_article1,.more_article2,.more_article3").mouseover(function(){ $(this).addClass("more_color").mouseout(function(){ $(this).removeClass("more_color"); }); }); $more1.toggle(function(){ $hiden1.show(); $(".more_article1 img").attr("src","http://tanteng.sinaapp.com/wp-includes/images/widget_btn_up.png"); },function(){ $hiden1.hide(); $(".more_article1 img").attr("src","http://tanteng.sinaapp.com/wp-includes/images/widget_btn_down.png"); }); $more2.toggle(function(){ $hiden2.show(); $(".more_article2 img").attr("src","http://tanteng.sinaapp.com/wp-includes/images/widget_btn_up.png"); },function(){ $hiden2.hide(); $(".more_article2 img").attr("src","http://tanteng.sinaapp.com/wp-includes/images/widget_btn_down.png"); }); $more3.toggle(function(){ $hiden3.show(); $(".more_article3 img").attr("src","http://tanteng.sinaapp.com/wp-includes/images/widget_btn_up.png"); },function(){ $hiden3.hide(); $(".more_article3 img").attr("src","http://tanteng.sinaapp.com/wp-includes/images/widget_btn_down.png"); }); return false; }); </script>
<!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><title>状态切换</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><title>expl</title><script type="text/javascript">$(function(){ var _hide=$(".widget ul");// _hide.each(function(){ $(this).find("li:gt(7)").hide();//8行以后默认隐藏 //获取 隐藏/显示 操作对象 var _more=$(this).parent().find(".more_article"); _more.bind({ "mouseover":function(){ $(this).addClass("more_color"); }, "mouseout":function(){ $(this).removeClass("more_color"); }, "click":function(){ var o=$(this).parent().find("ul li:gt(7)");//将操作对象指回其父级，并查找其下的ul中第8行以后的li var _img=$(this).find("img");//获取隐藏/显示 操作点的图片 if(o.is(":hidden")){ o.show(); _img.attr("src","http://tanteng.sinaapp.com/wp-includes/images/widget_btn_up.png"); }else{ o.hide(); _img.attr("src","http://tanteng.sinaapp.com/wp-includes/images/widget_btn_down.png"); } } }) }) return false;});</script></head><body><div class="widget"> <h3>随机文章</h3> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li><a href="#">10</a></li> <li><a href="#">11</a></li> <li><a href="#">12</a></li> <li><a href="#">13</a></li> <li><a href="#">14</a></li> <li><a href="#">15</a></li> </ul> <span class="more_article"><a href="#"><img src="http://tanteng.sinaapp.com/wp-includes/images/widget_btn_down.png"></a></span> </div> <!--显示个人日志--> <div class="widget"> <h3>个人日志</h3> <ul> <li><a href="#">日志1</a></li> <li><a href="#">日志2</a></li> <li><a href="#">日志3</a></li> <li><a href="#">日志4</a></li> <li><a href="#">日志5</a></li> <li><a href="#">日志6</a></li> <li><a href="#">日志7</a></li> <li><a href="#">日志8</a></li> <li><a href="#">日志9</a></li> <li><a href="#">日志10</a></li> <li><a href="#">日志11</a></li> <li><a href="#">日志12</a></li> <li><a href="#">日志13</a></li> <li><a href="#">日志14</a></li> <li><a href="#">日志15</a></li> </ul> <span class="more_article"><a href="#"><img src="http://tanteng.sinaapp.com/wp-includes/images/widget_btn_down.png"></a></span> </div> <div class="widget"> <h3>链接</h3> <ul> <li><a href="http://lanmei.sinaapp.com/" target="_blank">蓝莓's Blog</a></li> <li><a href="http://tiaopigui.com/" target="_blank">调皮鬼</a></li> <li><a href="http://www.phplu.com/" target="_blank">程程</a></li> <li><a href="http://www.zhangby.com/" target="_blank">张无计</a></li> <li><a href="http://mulone.net/" target="_blank">涵の沐</a></li> </ul> </div></body></html>
[解决办法]
这样写什么意思，jqeury声明变量不是要加“$”吗？这样才是jqeury对象，才能使用jqeury的方法。
申明变量不一定要加$的。$(function(){})这个$才是你说的意思
$(function(){
var _hide=$(".widget ul");//这就是得到了所有class="widget"的容器下ul的对象集合
_hide.each(function(){//注意这里用了each，循环体，遍历的意思
//_hide是对象集合，那么，在这里通过$(this)就可以得到其中的一个元素，以你的例子来说，就是
//先得到：随机文章，再得到：个人日志
$(this).find("li:gt(7)").hide();//8行以后默认隐藏
//获取 隐藏/显示 操作对象
var _more=$(this).parent().find(".more_article");
_more.bind({//这里的bind()事件绑定方法同样，也内置一个和前面each一样的遍历在，所以也可以从对象集合中取出单独的元素来
"mouseover":function(){
$(this).addClass("more_color");
},
"mouseout":function(){
$(this).removeClass("more_color");
},
"click":function(){
var o=$(this).parent().find("ul li:gt(7)");//将操作对象指回其父级，并查找其下的ul中第8行以后的li
var _img=$(this).find("img");//获取隐藏/显示 操作点的图片
if(o.is(":hidden")){
o.show();
_img.attr("src","http://tanteng.sinaapp.com/wp-includes/images/widget_btn_up.png");
}else{
o.hide();
_img.attr("src","http://tanteng.sinaapp.com/wp-includes/images/widget_btn_down.png");
}
}
})
})
return false;
});
</script>