展开与收起效果

时间：2021-06-05 19:34:04

本博客知识整理来自慕课网

1.使用style.display实现展开与收起效果a（一步到位）

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <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;
            display: block;
            margin: 0 auto;
            padding: 5px;
        }
        
        
        .btn
        {
            width: 80px;
            height: 20px;
            padding: 5px 3px 5px 3px;
            text-align: center;
            text-decoration: none;
            background: #f0f0f0;
            border: 1px solid #CCC;
        }
        .content
        {
            border: 1px solid #CCC;
            display: none;
            padding: 5px;
        }
        .title
        {
            font-weight: bold;
            color: #3030FF;
            font-size:11pt;
        }
        .subtitle
        {
            color: #CCC;
        }
        .btm
        {
            text-align: right;
            height: 30px;
        }
    </style>
    <script type="text/javascript">
        var time = 300;
        var h = 40;
        function showdiv(obj) {

            //obj.parentNode.nextSibling.nextSibling.style.display = "block";
            var x = obj.parentNode.nextSibling;
            //包含众多空格作为文本节点，因此在我们使用nextSibling和previousSibling时就会出现问题。
            //因为FireFox会把文本节点误当做元素节点的兄弟节点来处理。我们可以添加nodeType来判断。
            //当上一节点或者是下一节点为文本节点时，就继续寻找，直到找到下一个元素节点。
            //  其中nodeType的值主要有以下几种：
            // 
            // 元素节点的nodeType值为1
            // 属性节点的nodeType值为2
            // 文本节点的nodeType值为3
            if (x.nodeType != 1) {
                x = x.nextSibling;
            }
            x.style.display = "block";
            obj.parentNode.style.display = "none";

        }
        function hidediv(obj) {

            obj.parentNode.parentNode.style.display = "none";
            var x = obj.parentNode.parentNode.previousSibling;
            if (x.nodeType != 1) {
                x = x.previousSibling;
            }
            x.style.display = "block";
        }
        
    </script>
</head>
<body>
    <div id="pn">
        <div>
            <p class="title">
                Slack：团队日常沟通协作工具典范</p>
            <p class="subtitle">
                作者：来自网络 发表时间：2014-3-1 </p>
            <p>
                现在可以在Slack.com上申请成为试用用户，这是一个面对企业、团队的协作工具，似乎需要试用企业域名后缀的邮箱。 Slack从目前看，基本符合我对团队沟通工具的完全要求。特点如下：
                在所有端都可以进行，即桌面端，包括Mac OS和Windows系统；web端即浏览器；移动端的支持包括iOS和Android。 同时，移动端是有良好体验以满足移动办公便利性的。
                聚焦核心行为，即"发布一条信息"，团队成员只需要做一个这个基本行为即可。 发布一条...<a onclick="showdiv(this);" href="#">全文</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>
                    以#来进行快速形成话题组或者项目组。</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>
            <p class="title">
                Slack：团队日常沟通协作工具典范</p>
            <p class="subtitle">
                作者：来自网络 发表时间：2014-3-1 </p>
            <p>
                现在可以在Slack.com上申请成为试用用户，这是一个面对企业、团队的协作工具，似乎需要试用企业域名后缀的邮箱。 Slack从目前看，基本符合我对团队沟通工具的完全要求。特点如下：
                在所有端都可以进行，即桌面端，包括Mac OS和Windows系统；web端即浏览器；移动端的支持包括iOS和Android。 同时，移动端是有良好体验以满足移动办公便利性的。
                聚焦核心行为，即"发布一条信息"，团队成员只需要做一个这个基本行为即可。 发布一条...<a onclick="showdiv(this);" href="#">全文</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>
                    以#来进行快速形成话题组或者项目组。</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>
            <p class="title">
                Slack：团队日常沟通协作工具典范</p>
            <p class="subtitle">
                作者：来自网络 发表时间：2014-3-1 </p>
            <p>
                现在可以在Slack.com上申请成为试用用户，这是一个面对企业、团队的协作工具，似乎需要试用企业域名后缀的邮箱。 Slack从目前看，基本符合我对团队沟通工具的完全要求。特点如下：
                在所有端都可以进行，即桌面端，包括Mac OS和Windows系统；web端即浏览器；移动端的支持包括iOS和Android。 同时，移动端是有良好体验以满足移动办公便利性的。
                聚焦核心行为，即"发布一条信息"，团队成员只需要做一个这个基本行为即可。 发布一条...<a onclick="showdiv(this);" href="#">全文</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>
                    以#来进行快速形成话题组或者项目组。</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>
    </div>
</body>
</html>
说明： 此方法重要知识点在于 

1）nodeType的分类意义

2）style.display  值为block显示，none隐藏

2.使用style.display实现展开与收起效果b（一步到位）

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        body
        {
            margin: 0 auto;
            padding: 0;
        }
        a:focus
        {
            outline: none;
        }
        #pn
        {
            background: #e8e8e8;
            width: 600px;
            display: block;
            margin: 0 auto;
            padding: 5px;
            font-size: 9pt;
            height: auto;
        }
        .slide
        {
            margin: 0;
            padding: 0;
            width: 600px;
            border-top: solid 4px gray;
            margin: 0 auto;
        }
        .btn-slide
        {
            background: gray;
            text-align: center;
            width: 120px;
            height: 30px;
            padding: 10px 10px 0 0;
            margin: 0 auto;
            display: block;
            color: #fff;
            text-decoration: none;
        }
    </style>
    <script type="text/javascript">
        function showdiv() {
            document.getElementById("hpn").style.display = "block";
            //         document.getElementById("pn").style.height='80px';
            document.getElementById("strHref").href = "javascript:hidediv();";
            document.getElementById("strHref").innerHTML = "收起-";
        }
        function hidediv() {
            document.getElementById("hpn").style.display = "none";
            //          document.getElementById("pn").style.height='60px';
            document.getElementById("strHref").href = "javascript:showdiv();";
            document.getElementById("strHref").innerHTML = "更多选项+";
        }
    </script>
</head>
<body>
    <div>
        <div id="pn">
            <p>
                手机 - 商品筛选</p>
            <p>
                网络： 移动4G（TD-LTE ） 联通4G（TD-LTE） 联通3G（WCDMA）
            </p>
            <div id="hpn" style="display: none">
                <p>
                    价格： 5000以上 4000-4999 3000-3999 2000-2999
                </p>
                <p>
                    特点： JDPhone计划 "0"元购机 防水 长待机 1080P全高清屏
                </p>
            </div>
        </div>
        <p class="slide">
            <a href="javascript:showdiv();"  id="strHref" class="btn-slide">更多选项+</a></p>
    </div>
</body>
</html>
效果生硬，展开与收起一步到位。

3.通过slideToggle使用滑动效果，在显示和隐藏状态之间切换

<!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>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
        body
        {
            margin: 0 auto;
            padding: 0;
        }
        a:focus
        {
            outline: none;
        }
        #pn
        {
            background: #e8e8e8;
            width: 600px;
            display: block;
            margin: 0 auto;
            padding: 5px;
            font-size: 9pt;
            height: auto;
        }
        .slide
        {
            margin: 0;
            padding: 0;
            width: 600px;
            border-top: solid 4px gray;
            margin: 0 auto;
        }
        .btn-slide
        {
            background: gray;
            text-align: center;
            width: 120px;
            height: 30px;
            padding: 10px 10px 0 0;
            margin: 0 auto;
            display: block;
            color: #fff;
            text-decoration: none;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".btn-slide").click(function () {
                $("#hpn").slideToggle();
            });
        });
    </script>
</head>
<body>
    <div>
        <div id="pn">
            <p>
                手机 - 商品筛选</p>
            <p>
                网络： 移动4G（TD-LTE ） 联通4G（TD-LTE） 联通3G（WCDMA）
            </p>
            <div id="hpn" style="display: none">
                <p>
                    价格： 5000以上 4000-4999 3000-3999 2000-2999
                </p>
                <p>
                    特点： JDPhone计划 "0"元购机 防水 长待机 1080P全高清屏
                </p>
                 <p>
                    价格： 5000以上 4000-4999 3000-3999 2000-2999
                </p>
                 <p>
                    价格： 5000以上 4000-4999 3000-3999 2000-2999
                </p>
            </div>
        </div>
        <p class="slide">
            <a href="#" id="strHref" class="btn-slide">更多选项+</a></p>
    </div>
</body>
</html>
通过jquery的slideToggle使目标元素在点击事件中来回切换“显示”与“隐藏”两种状态。

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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>自动展开</title>
    <style type="text/css">
        body
        {
            margin: 0 auto;
            padding: 0;
        }
        a:focus
        {
            outline: none;
        }
        
        #pn
        {
            background: #e8e8e8;
            height: 60px;
            width: 600px;
            display: block;
            margin: 0 auto;
            padding: 5px;
            font-size: 9pt;
            height: auto;
            text-align: center;
        }
        .slide
        {
            margin: 0;
            padding: 0;
            width: 600px;
            border-top: solid 4px gray;
            margin: 0 auto;
        }
        .btn-slide
        {
            background: gray;
            text-align: center;
            width: 590px;
            height: 30px;
            padding: 10px 10px 0 0;
            margin: 0 auto;
            display: block;
            color: #fff;
            text-decoration: none;
        }
    </style>
    <script type="text/javascript">
        var time = 300;
        var h = 0;
        function addCount() {
            if (time > 0) {
                time--;
                h = h + 5;
            }
            else {
                return;
            }
            if (h >= 300)  //高度 
            {
                return;
            }
            else {

                document.getElementById("pn").style.height = h + "px";
            }
            setTimeout("addCount()", 30);
        }
        window.onload = function showAds() {
            addCount();
            setTimeout("noneAds()", 5000); //停留时间自己调了 
        }
        var T = 300;
        var N = 300; //高度 
        function noneAds() {
            if (T > 0) {
                T--;
                N = N - 5;
            }
            else {
                return;
            }
            if (N <= 0) {
                document.getElementById("pn").style.display = "none";
                //document.getElementById("pn").style.height = "30px";
                return;
            }
            else {
                document.getElementById("pn").style.height = N + "px";
            }
            setTimeout("noneAds()", 30);
        } 
    </script>
</head>
<body>
    <div>
        <div id="pn">
            <h1>
                欢迎来到慕课网</h1>
        </div>
        <p class="slide">
            <a href="javascript:showdiv();" id="strHref" class="btn-slide">慕课网欢迎你</a>
		</p>
    </div>
</body>
</html>  

 

 


 

 
 
 
 
 
 
 







 

 
 

 

 

 
 

 

 

 

 
 

 

 

标签：
相关文章