日期:2014-05-17  浏览次数:20438 次

实现新闻的展开和折叠
例如:一段内容过长了,我限制他显示为300字内,但是超出了300的就先用省略号代替,然后后面添加一个展开,点击展开后

就显示所有的内容,这是,展开就变成了 折叠,点击折叠又变成了展开,并且,折叠后又像是300字内了;

能在读取数据库的时候就处理么?还是要绑定给页面的数据的时候处理?怎么解决呢?还要无刷新的。给个效率高的解决办法
------最佳解决方案--------------------
div的隐藏显示
Encoding.Default.GetString(Encoding.Default.GetBytes(str), 0, 300) 
------其他解决方案--------------------
把大于300字的内容放到一个层,然后点击展开就显示,折叠就隐藏
------其他解决方案--------------------
length>300 ? 绑定+"..."+<div display="none">大于300的数据</div> : 

------其他解决方案--------------------
展开后就显示所有的内容  ????

如果非常长怎么办  ???
------其他解决方案--------------------
这个肯定是在数据绑定的时候处理的。
------其他解决方案--------------------
这很简单的:
先写一个css类:
//这个就是出现.....宽度你只要先写死
.fff{overflow:hidden; word-spacing:normal; white-space:normal;-o-text-overflow: ellipsis;text-overflow:ellipsis;}
然后就出现+。点击+号然后就又动态的改变他的宽度就可以了
------其他解决方案--------------------
建议LZ使用JS代码来做此操作,网上有很多这个类型的代码
------其他解决方案--------------------
自己实现,用隐藏于接值,然后js判断
------其他解决方案--------------------
你 用JS获取字符串后判断是否超过300如果超过就截取297个字后边跟上...  如果别人点击展开 你在讲整个字符串显示出来
------其他解决方案--------------------
引用:
你 用JS获取字符串后判断是否超过300如果超过就截取297个字后边跟上... 如果别人点击展开 你在讲整个字符串显示出来


就是这么做的
------其他解决方案--------------------
<script language = JavaScript>
(function()
{
  var o =window.document.getElementById('loading')
  var s = o.innerHTML;
  var p = document.createElement("span");
  var n = document.createElement("a");
  p.innerHTML = s.substring(0,366);
  n.innerHTML = s.length > 366 ? ".........<br><font color='red'>点击这里,阅读更多的内容。。。</font>" : "";
  n.href = "#";
  n.onclick = function(){
    if (n.innerHTML == ".........<br>点击这里,阅读更多的内容。。。"){
      n.innerHTML = "<font color='#5481bc'><b>收起</b></font>";
      
p.innerHTML = s;
    }else{
      n.innerHTML = ".........<br>点击这里,阅读更多的内容。。。";
      p.innerHTML = s.substring(0,366);
    }
  }
  o.innerHTML = "";
  o.appendChild(p);
  o.appendChild(n);
})();
</script>     
          
------其他解决方案--------------------
 <div style="margin-bottom:30px; margin-left:12px; margin-right:12px;font-size:13px; font-weight:300; line-height:25px;" id="loading">qwertyuiop  </div>
只有IE9才兼容