jquery - 将内联元素扩展到其自动宽度

Question

我有一个情况，我有一个按钮，它后面有一个对象。最初对象的宽度为 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");
    }

});

Answer 1

你可以做的是将文本包裹在另一个元素上:

<div class="elastic">
      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, laboriosam.</div>
</div>

然后使用 CSS 更改 display 属性，以便获得宽度值。

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

检查这个 Demo Codepen