在查看更多/更少的操作中添加數據

我寫了一個小腳本，通過單擊（查看更多/更少）來展開和摺疊。我的問題是我有「點擊我」按鈕，當我點擊它動態創建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像素之後。

來源

2012-07-06 user1184100

嗨，哥們我試了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

來源

2012-07-06 03:56:12

謝謝你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>

來源

2014-04-17 10:26:11

在查看更多/更少的操作中添加數據

回答

相關問題