我遇到的情况是我有一个按钮，后面有一个对象。最初，对象的宽度为0。其想法是，当单击按钮时，它会扩展到其“精确宽度”。
文本的长度可以不同。我所知道的是，它永远不会超过1行，因此我不必担心换行。
我做了一个小样机（当然不起作用），描述了我所描述的情况。有人可以告诉我我该怎么做吗？
修正：http ://codepen.io/dbugger/pen/HbyLr
我要适应的JS代码：
$(".handler").on("click", function(){
if($(this).hasClass("open")){
$(".elastic").animate({width:"0px"});
$(this).removeClass("open");
} else {
// Here i cant animate to auto
$(".elastic").animate({width:"auto"});
// This works, but there is no animation...
$(".elastic").css({width:"auto"});
$(this).addClass("open");
}
});
您可以做的是将文本包装在另一个元素上：
<div class="elastic">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, laboriosam.</div>
</div>
然后使用CSS更改display属性，以便获得宽度val。
.elastic div {
white-space:nowrap;
display:inline-block;
}
并使用jQuery将该值视为 var
else {
var siz = $(this).next('.elastic').find('div').width();
$(".elastic").animate({width:siz});
$(this).addClass("open");
}
检查此演示Codepen
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句