JQUERY 层-隐藏-显示 效果

JQUERY 层-隐藏-显示 效果
可以应用与文章列表摘要模式-列表模式切换:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-EN">
<head>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Simple JQuery Collapsing menu</title>
</head>
<body>
<script type="text/javascript">
$(function()
{
	var i = 1;
	$("#mostrar").click(function(event) {
	if(i%2 == 1)
		$("#mostrar").html("简洁模式");
	else
		$("#mostrar").html("摘要模式");
	event.preventDefault();
	$(".box2").slideToggle();
	i++;
	});
});
</script>
<style type="text/css">

#mostrar{
display:block;
width:70%;
padding:5px;
border:2px solid #D0E8F4;
background-color:#ECF8FD;
}
h2 { font-size:14px;}
.itembox { border:#99CCCC solid 1px; margin-bottom:10px; padding:10px;}
</style>
<a href="#" id="mostrar">摘要模式</a>
<div id="content" style="width:70%">
  <div class="news-list">
    <div class="itembox itembox2">
      <div class="box1">
        <h2><a href="#" target="_blank">站长要想摆脱搜索 塑造网络品牌是前提</a></h2></div>
      <div class="box2">我相信来Admin5.com逛的站长们的流量大多都是靠搜索来的,在国内如果谈搜索百度是不能不谈的,谁让他是中国的老大呢,但是随着百度算法的一再的调整,靠搜索靠百度为生也越来越难,当然也不排除那些网站优化中的大侠们,比较百度的首页的位置是有限的,高手也是少之.... [<a href="/article/20090809/171937.shtml" target="_blank">阅读全文</a>]
        <div class="box3">分类:<span class="catspan"><a href="#">美国生活</a></span>作者:<span class="boxspan">YAO YINGYING</span>点击:<span class="boxspan">47082</span>评论:<span class="boxspan">319</span></div>
      </div>
    </div>
    <div class="itembox">
      <div class="box1">
        <h2><a href="#" target="_blank">站长 请不要忽视了你的网站LOGO</a></h2></div>
      <div class="box2">通常,我们观察一个人,首先看到的是他的相貌,其次是身材、衣着(色狼尤是如此)。我们有可能一个星期都不洗澡,但每天都要洗脸,男生要刮胡子,女生要化妆,目的只有一个,要把最漂亮的一面展示给别人我要问问同在.... [<a href="#" target="_blank">阅读全文</a>]
        <div class="box3">分类:<span class="catspan"><a href="#">美国生活</a></span>作者:<span class="boxspan">YAO YINGYING</span>点击:<span class="boxspan">47082</span>评论:<span class="boxspan">319</span></div>
      </div>
    </div>
    <div class="itembox itembox2">
      <div class="box1">
        <h2><a href="#" target="_blank">新站长开站要谨记的三条真理</a></h2></div>
      <div style="display: block;" class="box2">一:坚持才能胜利
        可能大家都跟我开始的时候一样,满怀信心的建了一个站,但是过了没几天觉得很灰心。
        为什么呢?因为没人来“欣赏”它嘛!就会开始怀疑?怀疑哪些呢?怀疑是不是自己的站不好看?
        用的网站程序不对?是.... [<a href="#" target="_blank">阅读全文</a>]
        <div class="box3">分类:<span class="catspan"><a href="#">美国生活</a></span>作者:<span class="boxspan">YAO YINGYING</span>点击:<span class="boxspan">47082</span>评论:<span class="boxspan">319</span></div>
      </div>
    </div>
    <div class="itembox">
      <div class="box1">
        <h2><a href="#" target="_blank">“QQ之父”马化腾自述:创业靠自己</a></h2></div>
      <div class="box2">去年是改革开放30周年,今年是新中国成立60周年,腾讯也迎来自己的第一个十年,中国从大国走向强国,互联网蓬勃生长,腾讯的发展离不开这样的大背景。
        1984年,我是上初二时来到深圳的,那时候深圳刚刚开放,这么多年.... [<a href="/article/20090807/171530.shtml" target="_blank">阅读全文</a>]
        <div class="box3">分类:<span class="catspan"><a href="#">美国生活</a></span>作者:<span class="boxspan">YAO YINGYING</span>点击:<span class="boxspan">47082</span>评论:<span class="boxspan">319</span></div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

356 thoughts on “JQUERY 层-隐藏-显示 效果

Comments are closed.