帮小弟我改进一上这个jquery代码
日期：2014-05-16 浏览次数：20623 次
帮我改进一下这个jquery代码
我做了一个jquery效果，点击下拉，显示更多，同时下拉按钮变向上按钮，点击隐藏。具体效果见我博客右边栏：http://tanteng.sinaapp.com
我右边有三个这样的效果，我定义三个不同的id，所以写jqeury基本都是分别写同样的效果，能不能用一种方法写到一起呢？？
html代码：
jquery代码：
我做了一个jquery效果，点击下拉，显示更多，同时下拉按钮变向上按钮，点击隐藏。具体效果见我博客右边栏：http://tanteng.sinaapp.com
我右边有三个这样的效果，我定义三个不同的id，所以写jqeury基本都是分别写同样的效果，能不能用一种方法写到一起呢？？
html代码：
- PHP code
<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代码：
- JScript code
<!--显示和隐藏效果-->
<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(&
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
