如何做到展开以及收起全文

最新推荐文章于 2025-05-06 09:21:09 发布
转载最新推荐文章于 2025-05-06 09:21:09 发布 · 1.4k 阅读
文章标签：
#展开收起 #显示隐藏函数
前端同时被 3 个专栏收录
7 篇文章
订阅专栏
css
6 篇文章
订阅专栏
JavaScript
4 篇文章
订阅专栏
<!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>
    <style type="text/css">
        body
        {
            margin: 0 auto;
            padding: 0;
            font-size: 9pt;
            line-height: 180%;
        }
        #pn
        {
            background: #f8f8f8;
            height: auto;
            width: 750px;
            margin: 0 auto;
            padding: 5px;
        }
        .artTitle
        {
            font-weight: bold;
            color: #3030FF;
            font-size: 11pt;
        }
        .subTitle
        {
            color: #CCC;
        }
        .content
        {
            border: 1px solid #CCC;
            display: none;
            padding: 5px;
        }
        .btm
        {
            text-align: right;
            height: 30px;
        }
        .btn
        {
            width: 80px;
            height: 20px;
            padding: 5px 3px 5px 3px;
            text-align: center;
            text-decoration: none;
            background: #f0f0f0;
            border: 1px solid #CCC;
        }
    </style>
    <script type="text/javascript">
        
        // 显示函数
        function showdiv(obj) {
            var x = obj.parentNode;
            var y = x.nextSibling;
            if(y.nodeType!=1){
                y = y.nextSibling;
            }
            y.style.display = "block" ;
            x.style.display = "none" ;
        }

       // 隐藏函数
        function hidediv(obj) {
            var y = obj.parentNode.parentNode;
            var x = y.previousSibling;
            if(x.nodeType!=1){
                x = x.previousSibling;
            }
            y.style.display = "none";
            x.style.display = "block";
        }

    </script>
</head>
<body>
    <div id="pn">
        <div id="art0">
            <p class="artTitle">
                Slack：团队日常沟通协作工具典范
            </p>
            <p class="subTitle">
                作者：来自网络 发表时间：2014-3-1
            </p>
            <p>
                现在可以在Slack.com上申请成为试用用户，这是一个面对企业、团队的协作工具，似乎需要试用企业域名后缀的邮箱。 Slack从目前看，基本符合我对团队沟通工具的完全要求。特点如下：
                在所有端都可以进行，即桌面端，包括Mac OS和Windows系统；web端即浏览器；移动端的支持包括iOS和Android。 同时，移动端是有良好体验以满足移动办公便利性的。
                聚焦核心行为，即"发布一条信息"，团队成员只需要做一个这个基本行为即可。 发布一条... <a href="#" onclick="showdiv(this);">全文</a></p>    //点击全文实现展开
            <div class="content">
                <p>
                    现在可以在Slack.com上申请成为试用用户，这是一个面对企业、团队的协作工具，似乎需要试用企业域名后缀的邮箱。 Slack从目前看，基本符合我对团队沟通工具的完全要求。特点如下：</p>
                
                <p>
                    聚焦核心行为，即“发布一条信息”，团队成员只需要做一个这个基本行为即可。</p>
                <p>
                    发布一条信息这个行为可以扩展成为该信息是一个图片或者一个文件等，以便协作更好进行，如果文件能快速预览则更好。</p>
                <p>
                    支持@方式直接和单个团队成员沟通，并且能够被其他成员看到和参与进来。</p>
                <p>
                    以#来进行快速形成话题组或者项目组。</p>
                <p>
                    良好的搜索支持。 上述虽然是Slack的特性，也是我对团队日常协作工具的要求——显然，Slack完全符合这些要求，而且产品做得很易用。这些要求其实就是我对“移动、社交、云端存储”的理解，这三个因素基本会重写很多软件和应用。</p>
                <p>
                    Slack有免费的lite版本，但收费版本似乎价格对中文用户而言略高。</p>
                <p>
                    Slack由我很喜欢的项目Flickr的创始人新公司TinySpeck创办，因此基础甚好。而且从目前看，基本上会成为一个很成功的应用，所以在产品持续发展上面应该毫无问题。</p>
                <p>
                    The post Slack：团队日常沟通协作工具典范 appeared first on 游山打猎.</p>
                <div class="btm">
                    <a href="#" class="btn" onclick="hidediv(this);">收起全文</a>    //点击收起全文实现收起
                </div>
            </div>
        </div>
        <hr />
        <div id="art1">
            <p class="artTitle">
                Slack：团队日常沟通协作工具典范
            </p>
            <p class="subTitle">
                作者：来自网络 发表时间：2014-3-1
            </p>
            <p>
                现在可以在Slack.com上申请成为试用用户，这是一个面对企业、团队的协作工具，似乎需要试用企业域名后缀的邮箱。 Slack从目前看，基本符合我对团队沟通工具的完全要求。特点如下：
                在所有端都可以进行，即桌面端，包括Mac OS和Windows系统；web端即浏览器；移动端的支持包括iOS和Android。 同时，移动端是有良好体验以满足移动办公便利性的。
                聚焦核心行为，即"发布一条信息"，团队成员只需要做一个这个基本行为即可。 发布一条... <a href="#" onclick="showdiv(this);">全文</a></p>      //点击全文实现展开
            <div class="content">
                <p>
                    现在可以在Slack.com上申请成为试用用户，这是一个面对企业、团队的协作工具，似乎需要试用企业域名后缀的邮箱。 Slack从目前看，基本符合我对团队沟通工具的完全要求。特点如下：</p>
                <p>
                    在所有端都可以进行，即桌面端，包括Mac OS和Windows系统；web端即浏览器；移动端的支持包括iOS和Android。</p>
                <p>
                    同时，移动端是有良好体验以满足移动办公便利性的。</p>
                <p>
                    聚焦核心行为，即“发布一条信息”，团队成员只需要做一个这个基本行为即可。</p>
                <p>
                    发布一条信息这个行为可以扩展成为该信息是一个图片或者一个文件等，以便协作更好进行，如果文件能快速预览则更好。</p>
                <p>
                    支持@方式直接和单个团队成员沟通，并且能够被其他成员看到和参与进来。</p>
              
                <p>
                    The post Slack：团队日常沟通协作工具典范 appeared first on 游山打猎.</p>
                <div class="btm">
                    <a href="#" class="btn" onclick="hidediv(this);">收起全文</a>     //点击收起全文实现收起
                </div>
            </div>
        </div>
      
         
    </div>
</body>
</html>