我做了一个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>
<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>
<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>
1.
var _hide=$(".widget ul");这样写什么意思,jqeury声明变量不是要加“$”吗?这样才是jqeury对象,才能使用jqeury的方法。
2.var _more=$(this).parent().find(".more_article");
这里 _more前面没定义,后面的$(this)指的谁??我是初学者,不是很明白,求赐教!
1.
var _hide=$(".widget ul");这样写什么意思,jqeury声明变量不是要加“$”吗?这样才是jqeury对象,才能使用jqeury的方法。
2.var _more=$(this).parent().find(".more_article");
这里 _more前面没定义,后面的$(this)指的谁??我是初学者,不是很明白,求赐教!
$(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>