展开与收起效果

最新推荐文章于 2023-11-02 14:53:18 发布
最新推荐文章于 2023-11-02 14:53:18 发布
阅读量1.4k 收藏 3
点赞数
分类专栏： HTML+CSS+JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lezizai_happy/article/details/51622948
版权

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

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 οnclick="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" οnclick="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 οnclick="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" οnclick="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 οnclick="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" οnclick="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>








lezizai_happy
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实现展开收起效果
weixin_44540285的博客
01-18 4467
开发工具与关键技术：DW与CSS + JS + CSS3 作者：刘华叶 撰写时间：2019年1月18日 今年是我第一次接触IT，学校教了很多东西，我也从中受益匪浅，以前觉得IT很无聊，但是自从接触了这个行业后，才发现IT是多么的神奇，能够做出很多东西，下面我就用所学知识做了一个展开收起网页，跟大家分享一下。 一．HTML代码如下： 首先用一个大盒子把里面的内容包起来，里面放入dl列表标签，定义列...
实现展开收起功能最简单的方法！
芳草萋萋鹦鹉洲哦
06-07 2564
系统前端框架为 Ant Design，数据用Mock模拟. 【效果图】 【思路】 1、用一个全局变量 fold 控制 “ 展开收起 ” 文字和箭头，默认为true展开状态： @click="fold = !fold" ； 2、对于内容：v-for循环时用 v-if 判断每一个 item 的 index，v-if="index<16 || fold" ； 收起状态下： fold = false , 大于一行的容量16个后，index<16 也为false , 第二行的节点不再显示； 点击展.
展开和收起
weixin_54420874的博客
10-28 460
注意看红色箭头，共有10个步骤，按顺序操作下去 1.在桌面新建文件夹，打开DW新建(ctrl+n)html,保存到一开始在桌面的文件夹里面，命名为index，接下来就开始敲代码了。 2.在<title>标签里面修改浏览器中的命名。首先的一个<div>标签给了个类，这个<div>标签是外围，所有内容都在开始的第一个<div>标签里面。相当于一个屋子。 3.第二个<div>标签是第二程度，相当于屋子里面的小小的房间，独有的空间。接下来是<t
View系列：View项目：布局展开收起
C++ JAVA的专栏
03-26 2442
11
如何灵活实现文本或图片的展开收起功能？
weixin_45644355的博客
11-02 459
首先要根据内容的高度是否超过指定高度来判断展开按钮显示与否，所以需要先获取dom元素，以及元素的高度，由于页面渲染需要时间，所以在获取元素高度这里需要加一个延时；然后因为图片渲染的时间要比文本更长，尤其是有很多张图片的情况下，所以在判断内容有图片的情况下，需要在图片的onload事件里执行获取元素的高度，也就是在图片渲染完成以后再去获取元素的高度；由于加了延时以后，图片会有一个先展开了全部然后突然被收起的动作，用户体验很不好，所以在这里加了一个骨架屏起到一个隐藏渲染过程的效果。
展开与收起效果JS网页特效
11-11
在网页设计中，"展开与收起效果"是一种常见的交互元素，主要用于节省页面空间并提高用户体验。这种特效通常应用于导航菜单、文章摘要、评论列表等地方，让用户能够自由选择是否查看详细内容。JavaScript（JS）作为...
Android实现长图展开与收起效果
01-20
在实现长图展开与收起效果时，我们需要使用`matrix`属性，因为它允许我们自定义图片的显示方式，从而实现图片高度的变化。以下是一个基本的布局示例： ```xml android:id="@+id/iv_long_picture" android:layout...
展开与收起效果1
09-19
展开与收起有以下四种展示效果，可以根据自己的需要选择恰当的展示效果
小程序实现展开/收起的效果示例
10-17
总结来说，小程序实现展开/收起效果主要包括以下步骤： 1. 创建HTML结构，设置标题和内容区域。 2. 编写CSS样式，设定内容的默认收起样式。 3. 在数据中定义控制状态的变量，并添加点击事件处理函数。 4. 根据状态...
拜托，css这样实现多行文本“展开收起” 超酷的好吧
weixin_43964148的博客
02-16 4070
前言 2022.02.14的午后，我站在你家门口，再次遇见了你，他又来牵起你的手 无法言语，我是什么，这样傻傻的我怎么守护你 这次我静静哭了选择放弃，我好想好想把记忆折叠起 可惜，记忆不能像之前那个需求一样自由展开与折叠 前段时间接到一个需求，关于文字展开和收起的，走了很多路,踩了很多坑。 在这个夜深人静，想你想到泪流的时候，决定记录分享一下。 需求如下所述： 未满两行时 超过两行，少于7行时 未展开 展开 超过7行时 未展开 展开 就如上面所述，我倒是第一次做这种需求，于是就网上
js实现展开和收起效果
11-30
JavaScript实现展开和收起效果，JS展开，JS收起，JS点击按钮加载。
ios-分组效果，收缩展开view的简单封装，弹簧动画.zip
07-11
项目需要，简单封装了一下，还是挺简单的，注释比较全，喜欢的同学赶紧来下载吧
商城分类列表中展开与收起功能实现
weixin_55109830的博客
12-25 512
我希望刚开始上来每个种类最多只有10个（后台每次请求传10个），那么如果第一次请求某个种类达到10个，说明后台该种类一定大于等于10个，那么将有一个展开按钮，如果小于10个就没有展开按钮。 如果我展开之后依然返回了十个，那么我认为后台可能还有该种类，因此也显示展开，而第二次不足10个的，应当显示收起（收回刚刚展开的）。 按照这个逻辑解释就是 如果当前获取到的种类是10的倍数，那么说明后台可能还存在未获取的数据，而不是10的倍数的说明已经获取完成了（如果没获取完成，会获取10个满，而不是10个以下）
vue实现展开收起
weixin_41784462的博客
07-13 5547
需求示例 前端界面中存在展开收起功能，dome高度超过100px，前端展示展开收起功能。收起->100px，展开->自适应高度；dome高度小于100px，不展示操作按钮。dome高度存在动态变化的可能
评论 展开|收起
qq_41913971的博客
08-03 1659
1）根据判断字符串长度区分是否做收缩处理 特点：简单，有空行隐患 <template> <!-- 话题 简介 组件 --> <div class="intro"> <div ref="introContent" class="intro__content" :class="{'intro__content-close': this.intro.length > 100 && !isOpen}">
Markdown中如何实现内容折叠操作
洪晓鸿
01-13 2313
点击三角形或者文字 --展开查看-- 都会触发展开收起。markdown 写作不可避免的会使用到折叠效果的。使用 html 代码可以实现内容折叠的效果。这里使用HTML实现。
多行文本展开收起（css）
weixin_43765747的博客
02-21 3006
在实现之前，先了解文本超出部分省略的实现方法。 单行文本： .text{ width: 250px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; } 多行文本： .text { display: -webkit-box;//必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。 -webkit-line-clamp: 3;//用来限制在一个块元素显示的文本的行数 -webkit-
markdown收缩展开代码
sinat_36234054的博客
01-06 4478
代码折叠 折叠语法：<details>标签 1 2 3 4 5 <details> <summary>点击时的区域标题：点击查看详细内容</summary> <p> - 测试 测试测试</p> <pre><code>title，value，callBack可以缺省</code></pre> </details> .
Markdown展开与收起的黑三角
吴甜甜的技术博客
01-16 6035
文章目录Markdown展开与收起的黑三角代码段格式Markdown展开 Markdown展开与收起的黑三角 代码段格式 <details> <summary>样例</summary> </details> Markdown展开 # Markdown收起
textview的展开与收起
最新发布
01-16
以下是实现TextView展开与收起效果的方法： 1. 使用MaxLines属性和Ellipsize属性： ```xml android:id="@+id/textView" android:layout_width="match_parent" android:layout_height="wrap_content" android:...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值