点击全部显示剩下的内容没能实现。。。

图片说明图片说明
想传到这个框里面一直都传不进去

0

3个回答

你在点击a标签的时候,只是根据a标签的内容来判断,并且改变了a标签的内容,但是span标签里的html并没有发生变化,要么写change事件,根据a标签内容来改变span标签内容,要么就根据a标签的值来动态加载span标签里的内容

1

你可以模仿下面例子试试

 <div class="show-content"></div>
        <a class="more" shanattr="false">
            (更多)
        </a>
        <script type="text/javascript">
            $(function(){
                var shan ="我是一个聪明有智慧的孩子。我有着浓浓的眉毛大大的眼睛,还有一张会说话的小嘴吧";
            $(".show-content").html(shan.substring(0,20));
            $(".more").unbind("click").bind("click",function(){
                if($(this).attr("shanattr") =="false"){
                    $(".show-content").html(shan);
                    $(this).attr("shanattr","true");
                }else{
                    $(this).attr("shanattr","false");
                    $(".show-content").html(shan.substring(0,20));
                }
            })
            })
        </script>
1

拜托以后发问题能不能顺便把源码贴上?方便别人给你找问题?你这样给谁看?

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
JS实现显示部分文字点击显示全部
js显示隐藏层 测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语句测试语
Vue中评论列表里的文字实现“查看全文”效果,超过100字的部分自动隐藏,点击“查看全文”之后再显示当前评论全部文字
效果图: 解决方法: 1.遍历获得的列表数据,给每个评论以及评论的第一个回复,添加一个新属性 2.根据这个属性值(true or false),给文字显示两种css(超过100字的以及少于100字的) 3.点击"查看全文",遍历列表数据,根据id比对,将对应id的这个新属性的属性值取反 代码如下: Html部分: &lt;div class="item-body"&gt; &...
JS实现默认显示部分文字点击按钮显示全部内容
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">     JS实现默认显示部分文字,点击按钮显示全部        民间机构提前3天预报大理地震 地震局称违法  17日大理州5.0级地震发生之后,在微博上一条曾在3天前就预测大理将发生5.0级地震的微博受到了 很多网友的关注。  记者联系上了微博
文本内容显示三行,多余部分显示...,点击全部展开
H5 使文本内容显示三行,多余部分显示...,点击全部展开 CSS部分: .mui-ellipsis-3 {     display: -webkit-box;     overflow: hidden;     white-space: normal!important;     text-overflow: ellipsis;     word-wrap:
最多显示三行,多余...展开,点击展开收起 getClientRects
需求:显示文本,最多显示三行,多余的显示 ... 展开,点击展开收起.效果如下:需要考虑的点:换行,展开的时候遮住收起如果是不需要有固定在右侧的展开收起,那么移动端直接用css3:overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: ve...
jquery选择器(内容部分显示点击全部显示)
佳能1545 佳能1545 佳能1545 佳能1545 佳能1545 佳能1545 佳能1545 佳能1545 佳能1545 佳能1545 佳能1545 佳能1545 佳能1545 显示更多 $(function(){ var $list= $(".listbox li:gt(5)") $list.hide(); var $showmore=$
vuejs数据超出单行显示更多,点击展开剩余数据
说下我在工作中遇到的这个需求 1:页面上的菜单选项,选项内容是后台接口返回的数据,现在的需求是当选项的内容超出一行,在这行的右面显示更多,点击更多,显示剩下的选项的内容 看下效果图 这是展开的效果图 下面先看下我的html部分代码 &amp;lt;div :class=&quot;bussinessType?'show':'hidde'&quot;&amp;gt; &amp;lt;dl&amp;gt; &amp;lt;dt...
vue 点击展开显示更多 点击收起部分隐藏
功能如下: 这里就需要一开始只显示6个数据,点击展开才显示全部 HTML里调用showdetailList: &amp;lt;div&amp;gt; &amp;lt;p v-for=&quot;(item, index) in showdetailList&quot;&amp;gt; &amp;lt;span&amp;gt;{{item.title}}&amp;lt;/span&amp;gt; &amp;l...
[Android]自定义一个可以展开显示更多的文本布局
在查阅其他博主的博文中,发现了一个比较不错的文本伸展的效果,在此借鉴学习。可以先看看到底是什么样的效果 看起来很眼熟吧,很多应用中都有这样的使用场景,其实就是控制textview的maxlines属性,来做的。在这里就简单的说下定义的过程 1.stretchy_text_layout.xml --这是创建一个布局,用来装裱以上展示的控件 <LinearLayout xmlns:an
js实现更多内容的显示与隐藏
JS实现默认显示部分文字,点击按钮显示全部        民间机构提前3天预报大理地震 地震局称违法  17日大理州5.0级地震发生之后,在微博上一条曾在3天前就预测大理将发生5.0级地震的微博受到了很多网友的关注。  记者联系上了微博博主,该博主表示,他是通过分析云南省地震局官方网站的数据得出的预报信息。对此,省地震局回应表示,地震局欢迎民间机构与地震局进行一些学术上的探讨和交流,但
让很多内容只显示一部分,然后点击展开显示全部
新闻内容,只显示部分,点击展开,可以显示全部新闻内容,点击收起,可以改变为只显示部分内容,通过JS截取字符串实现。
Android 中实现对textView 显示部分文字,点击按钮后显示剩余文字以及再度隐藏文字
TextView中开始显示定量文字,点击按钮后显示全部文字,点击按钮后将文字隐藏
jq点击按钮查看更多,循环全部隐藏或显示jquery, each(function(i){})
页面上有10行,但我默认只显示5行,点击查看更多后,另外5行才显示出来,怎么实现呢 如下 注意,需要先引入jq插件 &amp;amp;lt;tr id=&amp;quot;tr&amp;quot; style=&amp;quot;display:none&amp;quot;&amp;amp;gt; &amp;amp;lt;td &amp;amp;gt;第一行&amp;amp;lt;/td&amp;amp;gt; &amp;amp;lt;/tr&amp;amp;gt; &amp
点击查看全部,显示其余内容
&amp;lt;style&amp;gt;         #myarticle{             width:700px;             height:300px;             overflow-y:hidden;             border:1px solid green;             margin:20px auto;         }         ...
js横向显示全部文字,再点击显示缩略文字
因为爱情  给你一张过去的CD听听那时我们的爱情,有时会突然忘了,我还在爱着你    F:因为爱情 不会轻易悲伤E:所以一切都是幸福的模样F:因为爱情 简单的生长E:依然随时可以为你疯狂 F:因为爱情 怎么会有沧桑      function show(){  var pp = document.getElementsByTagName("p");  for (var i = 0;
vue内容很多时保证只有一定的高度,点击查看更多再展开所有的
上面是文章的内容,下面有个评论和点赞。要保证无论文章多长,下面的评论和点赞位置一直要在下面,其中一直方式是利用底部菜单的形式:         提交订单 但是如果不想用这种呢? 还有一种就是通过一个查看更多的按钮,点击了才会展开显示所有的内容,不然显示一个页面的。                            标题                 时间
[HTML+CSS+Vue.js] 超长文本等内容默认折叠显示,点击展开全文,再点击收起(仿知乎效果)
•需求:浏览时默认只显示前三行文本,剩余部分折叠,点击“展开阅读全文”显示完整文本,再点击文末的“收起”恢复折叠状态 •美化:“展开阅读全文”折叠杆挡住面板下端,并呈现半透明渐变效果 •技术:HTML + CSS + Vue.js
jquery 文字超出省略号,点击显示全部、收起
jquery 文字超出省略号,点击显示全部、收起             两句话深度开发几号上的佛牌维护佛文化的开户费收到了家很富是的开户费了色块大黄蜂评委会分是开将恢复时来得快积分还圣诞快乐抵抗力金凤凰收到了开间房                     复合弓放假光华科技个我快让他也未发生的分数线从V型从v错把女女过一会就返回二过水电费三的丰盛的v格式规范换
jquery悬停,鼠标移上去显示全部内容(包括多余隐藏内容)
1.bootrap的悬停显示    只需要引入bootstrap的js,css即可。关键代码 $('a').tooltip({title: "我是一个提示框,我在顶部出现",placement: "top"});  优点:好看,适用于单个。 2.jqury的悬停显示    只需要引入jquery.js,小demo如下 jQuery UI Tooltip - Defau
设置超过DIV高度范围隐藏结尾... 点击查看全文显示全部
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;title&amp;gt;文字超出长度用省略号显示,点击显示全文&amp;lt;/title&amp;gt; &amp;lt;/head&amp;gt; &amp;lt;body&amp;gt; &amp;lt;button&amp;gt;显示全文&a
JavaScript多行文本一行显示,点击可显示单元格全部内容的Table
【引子】在开发的过程中,表格Table有个缺陷,如果一行中某个单元格的超过一行,表格就不够美观了。下面的代码解决了这个问题:当表格被载入的时候,TD的宽度是原定的长 度,不会撑开TD,也不会影响其他TD,点击某行会按照本行所有单元格中行数最多的单元格的长度伸长行高。用户体验很好。 【优点】 1、对开发人员指定的表格没有任何影响; 2、使用简单; 3、被定义的表格样式可以随意的定制你的样式,不对你的样式构成影响; 4、移植性好,扩展性好。 【缺点】 目前用IE7测试正常,但不支持FireFox,工作比较忙,没时间更正,希望网友更正,俺在此谢过。^_^ 【使用方法】 1、将AutoTableSize.js包文件[点击这儿下载源代码]导入到你的web应用目录中; 2、引入包AutoTableSize.js,页面body底部加入: <script type="text/javascript" src="AutoTableSize.js"></script> 3、编写你的脚本调用: new AutoTableSize(); 当DOM对象中只有一个Table的时候不用指定Table的ID属性; new AutoTableSize(table); table:既可以是表格的ID属性,也可以是表格对象;
原生JS实现点击按钮显示更多内容
DIV显示部分内容,点击按钮后显示全部内容,点击收起隐藏部分内容.
js控制超出制定高度部分隐藏点击按钮展开全部
首先设置内容的高度,并制定超出高度部分隐藏 &amp;lt;div id='refer_a' style='height:80px;overflow:hidden'&amp;gt;内容&amp;lt;br /&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;a href='#' onclick='slideDiv(\&quot;refer_a\&quot;,80);return false;' class='afblue'&amp;gt;更多 ...
怎么控制 显示 DIV 里面的 字数 只显示部分文字
在 DIV 里面加如下 样式就可以了。 高度可自己设定 ----------------------------------------------------------- [quote] ...
jquery实现显示部分内容与全部内容的切换
自己用jquery写的一个小例子,用途比较广泛。代码注释比较全,有需要的可以参考。
默认显示三条数据,点击更多显示余下数据
默认显示三条数据,点击更多显示余下数据
CSS实现div的高度填满剩余空间
转自:http://www.cnblogs.com/zhujl/archive/2012/03/20/2408976.html 高度自适应问题,我很抵触用js去解决,因为不好维护,也不够自然,但是纯用CSS,难度不小,比如下面我要说的例子。 需求: 1. 这个矩形的高度和浏览器窗口的高度相同,不能出现纵向滚动条 2. 绿色部分高度固定,比如50px 3. 紫色
textview内容过多显示省略号,点击展开全部
开发中经常会遇到textview内容过多显示两三行后边显示省略号,有时还会需要点击展开全部显示:效果图是这样的,不会gif图制作,只能上图片好了直接上代码: //这是点击的代码 if (isShowDes) { tvDes.setEllipsize(TextUtils.TruncateAt.END);//收起 ...
列表内容超过长度用省略号代替,鼠标放上去显示全部内容
//设置样式 &amp;lt;style&amp;gt; table { table-layout: fixed;} .table th{text-align: center} table td { overflow:hidden; white-space:nowrap; text-overf...
多行文本超出用省略号代替,单击展开全部
这里主要讲解一个常见的文字处理程序,在我们开发的过程中,经常会遇到一段很长的文字,但是我们在页面上展示的时候,却需要他展示成几行,比如5行。这里分享一个自己写的小DEMO,大家可以参考一下:西安看一下效果图: (图一) (图二)如上“图一”所示,我们在页面加载的时候,让文字显示5行,超出的文字用省略号代替。当我们点击文字的时候,所有的文字全部展示出来。如“图二”所示。具体的代码如下:<html>
Android TextView内容过长加省略号,点击显示全部内容
在Android TextView中有个内容过长加省略号的属性,即ellipsize,用法如下: 在xml中: android:ellipsize="end"     省略号在结尾 android:ellipsize="start"   省略号在开头 android:ellipsize="middle"   省略号在中间 android:ellipsize="marquee"  跑马
表格td内容过多时,td显示省略号,鼠标移入显示全部内容。
两种方式显示: 1.title方式显示:           .tb{width:800px;font-size:12px;background:#6887D9}   .tb thead th{height:25px;background:#217AC4;color:white}   .tb tbody td{height:22px;background:whi
关于在列表中条目过多时显示更多,点击全部显示的效果
先上要的效果图吧~拿到效果图后的第一反应是 采用listView的不用类型的条目显示,并对对相应的条目进行显示(Visiable)与隐藏(gone)(第一类条目超过3个时就让第3个位置显示 显示更多,并隐藏其他更多的第一类条目,点击第3个位置的条目,让显示更多隐藏,同时显示更多的第一类条目,这样就不用处理 position的偏移及错乱问题) 但写了之后,发现,用gone 处理了 子条目虽然不显示了
让div填满剩下的空间
让div填满剩下的空间  方案一  一 如果parent是body  div2{ position:fixed; top:hpx; bottom:0; } 二 如果parent是div .parent{ position:relative; } .div2{ position:absolute; top:hpx; botto...
表格溢出内容省略号显示,悬停显示全部
表格溢出内容省略号显示,悬停显示全部 本文以layui为基础添加悬浮提示框,你也可以使用自己的提示框样式或所用框架中的提示框。 html部分在这里,我随意做一个表格,宽度百分百,外层固定宽度。表格中溢出的文字以“…”表示,此时省略的文本用一个提示框显示,没有省略则不出现全部内容的提示框。(使用layui时用到jQuery,使用其他方式提示全部内容时自行增删即可)<!DOCTYPE html> <
table &lt;td&gt;显示部分内容鼠标悬停显示全部的实现方法
一,引入layer.js插件(脚本文件);二,自己在代码中添加脚本代码:    //描述鼠标悬停显示全部内容 $(function () { $(&quot;td&quot;).on(&quot;mouseenter&quot;,function() { if (this.offsetWidth &amp;lt; this.scrollWidth) { var that = this; ...
jQuery实现简单点击隐藏和点击显示列表的功能
实现功能为:列表内容较长 隐藏部分内容 点击按钮显示隐藏内容 再次点击隐藏内容     jQ代码如下: $(function(){                 var $cate = $(&quot;ul li:gt(5):not(':last')&quot;) ;//获取大于第五行的内容不包括最后一行为对象                 $cate.hide();//将对象隐藏         ...
h5 页面中内容的全部展示和收缩
这个页面主要展示如果一个页面中的内容特别多的时候,内容收缩展示部分内容,点击展示之后,显示所有的内容,点击收缩展示部分的内容。
HTML CSS 省略号代码 超过长度省略号显示点击全部可以显示等 超出范围自动变成省略号,但鼠标可以选择文字,酷吧……
HTML CSS 省略号代码 超过长度省略号显示点击全部可以显示等 超出范围自动变成省略号,但鼠标可以选择文字,酷吧……
js+css展示收起,全文展示,收起等多篇文章整合
本文主要是根据多篇文章进行了整理js+css的展示和收起(关闭)的整合,方便以后的使用 New Document * { margin:0; padding:0;} body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;} .classDiv {
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 个人网页制作全部视频 java学习全部路线