帮我改进一下这个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>
jquery代码： <!--显示和隐藏效果-->
<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>

解决方案 »

  1.   

    <!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">蓝莓&#039;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>
      

  2.   

    两个问题：
    1.
    var _hide=$(".widget ul");这样写什么意思，jqeury声明变量不是要加“$”吗？这样才是jqeury对象，才能使用jqeury的方法。
    2.var _more=$(this).parent().find(".more_article");
    这里 _more前面没定义，后面的$(this)指的谁？？我是初学者，不是很明白，求赐教！
      

  3.   

    两个问题：
    1.
    var _hide=$(".widget ul");这样写什么意思，jqeury声明变量不是要加“$”吗？这样才是jqeury对象，才能使用jqeury的方法。
    2.var _more=$(this).parent().find(".more_article");
    这里 _more前面没定义，后面的$(this)指的谁？？我是初学者，不是很明白，求赐教！
      

  4.   

    这样写什么意思，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>