在查看更多/更少的操作中添加数据

问题描述：

我写了一个小脚本，通过单击（查看更多/更少）来展开和折叠。我的问题是我有“点击我”按钮，当我点击它动态创建div。但是，当div添加到DOM时，容器不会自动扩展，因为已经给出了高度。 将高度设置为自动点击将解决此问题，但有没有其他可能的解决方法。在查看更多/更少的操作中添加数据

的jsfiddle - http://jsfiddle.net/7ntQR/

代码

(function($) { 
    $.fn.truncateText = function() { 
     this.each(function() { 

      var el = $(this); 
      var height = el.height();  //get the current height 
      el.data("dht",height);   //use jquery data store to store the original height 
      el.css({      //set the height to some pixel... 
       'height':'40px' 
      }); 

      var btnState = 'collapse'; 

      var ix = $('<div>', { 
       'class':'seeMore' 
      }).appendTo($(el.parent())); 

      var sm = $('<span>').html('more') 
      .appendTo(ix) 
      .on('click' , function() { 
       if(btnState == 'collapse') {     
         btnState = 'expand';        
         el.animate({ 
          'height':'40px'       
         },500);  
       }else {              
         btnState = 'collapse'; 
         el.animate({ 
          'height':el.data("dht")       
         },500); 
       } 
      }); 


      btnState = 'expand'; 

      function expand(elm) { 
       elm.html('SEE LESS');           
      } 

      function collapse(elm) { 
       elm.html('more'); 
      } 




     }); 
    }; 

})(jQuery);

最初原始的div高度是使用所存储的数据（）和该div的高度被改变以40像素之后。

嗨，哥们我试了10分钟，我会推荐'height：auto' **虽然**我做了一个很小的改动，请看这里：http://jsfiddle.net/jeLkx/ **寻找一个叫**的标志' openstate'请':)）' – 2012-07-06 03:53:11

嘿Tats_innit当我点击“点击我”div不扩大，即高度保持不变。 – user1184100 2012-07-06 08:48:01

答

我会建议您在生成div时获取div的大小。例如获取$('some div id').height();并修复此高度并将其添加到您要展开的原始div。这将很容易遵循并添加。但我仍然建议你去用height:auto

谢谢你shiv ... – user1184100 2012-07-06 05:33:59

答

你可以用纯CSS做，并保持html的地方。下面是一个JS小提琴（更小，更不会被显示在IE6,7,8和内容将扩大）

http://jsfiddle.net/6sj4e/45/

.text { 
    height: 50px; 
    overflow: hidden; 
    height: 100%\9; 
    } 

input.less-more, 
input.less-more:checked ~ label.more, 
input.less-more:not(:checked) ~ label.less { 
    display: none; 
}

和HTML：

<input id="chbox" class="less-more" type="checkbox"> 
<div class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</div> 
<label for="chbox" class='more'>more</label> 
<label for="chbox" class='less'>less</label>

在查看更多/更少的操作中添加数据

相关推荐