Jquery 在“查看更多/更少操作”中追加数据

我写了一个小脚本，它可以通过单击来展开和折叠（请参阅更多/更少）。我的问题是我有“点击我”按钮，当我点击它的div是动态创建的。但是当div被添加到DOM中时，容器不会自动展开，因为高度是给定的单击时将高度设置为自动将解决此问题但是否有其他可能的方法解决此问题

JSFiddle-

代码

（函数（$）{
$.fn.truncatext=函数（）{
这个。每个（函数（）{
var el=$（本）；
var height=el.height（）；//获取当前高度
el.data（“dht”，height）；//使用jquery数据存储来存储原始高度
css（{//将高度设置为某个像素。。。
“高度”：“40px”
}); 
var btnState=‘崩溃’；
变量ix=$（''）{
“类”：“seeMore”
}).appendTo（$（el.parent（））；
var sm=$（''）.html（'more'）
.附录（九）
.on（'单击'，函数（））{
如果（btnState=='collapse'）{
btnState='扩展'；
动画片({
“高度”：“40px”
},500);     
}否则{
btnState=‘崩溃’；
动画片({
“高度”：标高数据（“dht”）
},500);
}   
});
btnState='扩展'；
函数扩展（elm）{
html（'SEE LESS'）；
}
功能崩溃（elm）{
html（'more'）；
}
}); 
};
})（jQuery）；

---

最初使用data（）存储div的原始高度，然后将div的高度更改为40px。

我建议您在生成div时获取div的大小。例如，获取

$（'somedivid'）.height（）

并固定此高度，然后将其添加到要展开的原始div中。这很容易理解和添加。但是我仍然建议您使用

height:auto

您可以使用纯css并保留html。这是一个JS提琴（IE6、7、8上不会显示越来越少的内容，内容会扩展）

以及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>

这是一位杰出的领袖，他是一位伟大的领袖。但是，在最低限度的利益下，我们必须在公共消费品的基础上，继续履行我们的义务。在亨德雷特的两个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里，一个房间里。不受时间和解决方案的限制，不受限制，不受限制，不受限制。典型的非哈本语；这通常是法律依据。调查显示莱克托雷斯·勒盖尔·勒格斯·库德·勒格特·萨皮乌斯。单簧管是一种动态的过程，是一种选择。沼泽地不属于戈蒂卡海岸，也不属于克拉拉沼泽地，而是每四分之一和五分之一海水形成的人文景观。Eodem modo typi，nobis videntur parum clari，未来的未婚妻Sollemens。
更多
较少的

嘿，伙计，我试了10分钟，我会推荐

高度：auto

尽管我做了一个很小的改变，请看这里：寻找一个名为

openState

的标志（请

：）

嘿，Tats_，当我点击“点击我”时，div不会扩展，即高度保持不变。

.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;
}

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