<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模仿QQ阅读的展开与收起</title>
<style>
body{
padding:0;
margin:0 auto;
}
#wapper{
width:750px;
height:auto;
margin: 0 auto;
background-color: #ccc;
}
.article{
padding:5px;
width:730px;
height:auto;
margin:0 auto;
background-color:#fff;
font-size: 16px;
}
.art-main{
text-indent: 2em;
font-size: 12px;
color:gray;
line-height: 1.5em;
}
a{
text-decoration: none;
color:#aeaeae;
}
.art-a{
text-align: right;
}
.art-content{
text-indent: 2em;
font-size: 16px;
line-height: 1.5em;
line-height: 1.5em;
display:none;
}
hr{
border:1px solid black;
}
</style>
</head>
<body>
<div id="wapper">
<div id="art1" class="article">
<h3>文章标题文章标题</h3>
<p><span>来源：作者1 时间：2015-2-22</span></p>
<p class="art-main" id="main">1我是摘要。 现在可以在Slack.com上申请成为试用用户，这是一个面对企业、团队的协作工具，似乎需要试用企业域名后缀的邮箱。 Slack从目前看，基本符合我对团队沟通工具的完全要求。特点如下：
在所有端都可以进行，即桌面端，包括Mac OS和Windows系统；web端即浏览器；移动端的支持包括iOS和Android。 同时，移动端是有良好体验以满足移动办公便利性的。
聚焦核心行为，即"发布一条信息"，团队成员只需要做一个这个基本行为即可。 发布一条...
<a href="#" onclick="javascript:showContent(this)">展开全文</a></p>
<div class="art-content" id="content">我是全文。
<p>
1现在可以在Slack.com上申请成为试用用户，这是一个面对企业、团队的协作工具，似乎需要试用企业域名后缀的邮箱。 Slack从目前看，基本符合我对团队沟通工具的完全要求。特点如下：
聚焦核心行为，即“发布一条信息”，团队成员只需要做一个这个基本行为即可。</p>
<p>
发布一条信息这个行为可以扩展成为该信息是一个图片或者一个文件等，以便协作更好进行，如果文件能快速预览则更好.
支持@方式直接和单个团队成员沟通，并且能够被其他成员看到和参与进来。</p>
<p>
以#来进行快速形成话题组或者项目组。</p>
<p>
发布一条信息这个行为可以扩展成为该信息是一个图片或者一个文件等，以便协作更好进行，如果文件能快速预览则更好。</p>
<p>
支持@方式直接和单个团队成员沟通，并且能够被其他成员看到和参与进来。</p>
<p>
以来进行快速形成话题组或者项目组。 </p>
<p class="art-a"><a href="#" onclick="javascript:hideContent(this)">收起全文</a></p>
</div>
</div>
<hr/>
<div id="art2" class="article">
<h3>文章标题文章标题</h3>
<p><span>来源：作者2 时间：2015-2-22</span></p>
<p class="art-main" id="main">2我是摘要。 现在可以在Slack.com上申请成为试用用户，这是一个面对企业、团队的协作工具，似乎需要试用企业域名后缀的邮箱。 Slack从目前看，基本符合我对团队沟通工具的完全要求。特点如下：
在所有端都可以进行，即桌面端，包括Mac OS和Windows系统；web端即浏览器；移动端的支持包括iOS和Android。 同时，移动端是有良好体验以满足移动办公便利性的。
聚焦核心行为，即"发布一条信息"，团队成员只需要做一个这个基本行为即可。 发布一条...
<a href="#" onclick="javascript:showContent(this)">展开全文</a></p>
<div class="art-content" id="content">我是全文。
<p>
2现在可以在Slack.com上申请成为试用用户，这是一个面对企业、团队的协作工具，似乎需要试用企业域名后缀的邮箱。 Slack从目前看，基本符合我对团队沟通工具的完全要求。特点如下：
聚焦核心行为，即“发布一条信息”，团队成员只需要做一个这个基本行为即可。</p>
<p>
发布一条信息这个行为可以扩展成为该信息是一个图片或者一个文件等，以便协作更好进行，如果文件能快速预览则更好.
支持@方式直接和单个团队成员沟通，并且能够被其他成员看到和参与进来。</p>
<p>
以#来进行快速形成话题组或者项目组。</p>
<p>
发布一条信息这个行为可以扩展成为该信息是一个图片或者一个文件等，以便协作更好进行，如果文件能快速预览则更好。</p>
<p>
支持@方式直接和单个团队成员沟通，并且能够被其他成员看到和参与进来。</p>
<p>
以来进行快速形成话题组或者项目组。 </p>
<p class="art-a"><a href="#" onclick="javascript:hideContent(this)">收起全文</a></p>
</div>
</div>
<hr/>
<div id="art3" class="article">
<h3>文章标题文章标题</h3>
<p><span>来源：作者3 时间：2015-2-22</span></p>
<p class="art-main" id="main">3我是摘要。 现在可以在Slack.com上申请成为试用用户，这是一个面对企业、团队的协作工具，似乎需要试用企业域名后缀的邮箱。 Slack从目前看，基本符合我对团队沟通工具的完全要求。特点如下：
在所有端都可以进行，即桌面端，包括Mac OS和Windows系统；web端即浏览器；移动端的支持包括iOS和Android。 同时，移动端是有良好体验以满足移动办公便利性的。
聚焦核心行为，即"发布一条信息"，团队成员只需要做一个这个基本行为即可。 发布一条...
<a href="#" onclick="javascript:showContent(this)">展开全文</a></p>
<div class="art-content" id="content">我是全文。
<p>
3现在可以在Slack.com上申请成为试用用户，这是一个面对企业、团队的协作工具，似乎需要试用企业域名后缀的邮箱。 Slack从目前看，基本符合我对团队沟通工具的完全要求。特点如下：
聚焦核心行为，即“发布一条信息”，团队成员只需要做一个这个基本行为即可。</p>
<p>
发布一条信息这个行为可以扩展成为该信息是一个图片或者一个文件等，以便协作更好进行，如果文件能快速预览则更好.
支持@方式直接和单个团队成员沟通，并且能够被其他成员看到和参与进来。</p>
<p>
以#来进行快速形成话题组或者项目组。</p>
<p>
发布一条信息这个行为可以扩展成为该信息是一个图片或者一个文件等，以便协作更好进行，如果文件能快速预览则更好。</p>
<p>
支持@方式直接和单个团队成员沟通，并且能够被其他成员看到和参与进来。</p>
<p>
以来进行快速形成话题组或者项目组。 </p>
<p class="art-a"><a href="#" onclick="javascript:hideContent(this)">收起全文</a></p>
</div>
</div>
<hr/>
</div>
<script>
//因为有很多篇文章，所以通过id肯定不行，我们想要的是点击哪个里的链接，就在哪个上面执行
function showContent(obj){
var div1=obj.parentNode;//摘要
var div2=div1.nextSibling;//正文
//alert(div2.nodeName);//弹出来的是#text，标明他获得的是空白的文本节点，所以这里要进行一下判断
if(div2.nodeType!=1){
div2=div2.nextSibling;
}
var arts=document.getElementsByClassName('art-content');
// for(var i=0;i<arts.length;i++){
// if(arts[i]==div2){
// div1.style.display="none";
// }else{
// arts[i].style.display="none";//我这里明明影藏的是正文部分，为什么会连摘要部分也一起影藏了呢？
//alert(arts[i].innerHTML);
// }
for(var i=0;i<arts.length;i++){
arts[i].style.display="none";
}
div1.style.display="none";
div2.style.display="block";//还是把摘要给影藏掉了。。。
}
function hideContent(obj){
var div1=obj.parentNode.parentNode;//正文
var div2=div1.previousSibling;
//alert(div2.nodeName);任然是空白格的文本文件
if(div2.nodeType!=1){
div2=div2.previousSibling; //摘要
}
div1.style.display="none";
div2.style.display="block";
}
</script>
</body>
</html>qq_大寒_2
百草无名
不知名的前端程序猴
相关分类