javascript - 具有垂直调整大小的 jQuery dotdotdot 插件

Question

我正在尝试让文本 block 垂直调整大小并使用 dotdotdot jQuery ellipsis-support 插件。 dotdotdot 插件具有设置高度参数，我想知道是否有动态更新该设置高度的方法。我想考虑相邻 div 的总高度并调整文本 block 的大小以适合特定 div 的整个高度。

我制作了这个 jsFiddle 作为我想要完成的事情的松散模型:http://jsfiddle.net/smittles/8psvZ/

理想情况下，随着红线向下移动，概要文本会展开并下降到红线。

因为我使用的是设定高度，所以这个模型现在不工作。我不知道要进行哪些调整才能使其正常工作。

如果可能的话，我确实想继续使用 dotdotdot.js。

Answer 1

使用toggle函数的回调重新调用dotdotdot代码。

参见 this updated fiddle或下面的代码片段:

$('.share').click(function(){
    $('.social_options').toggle('fast', function(){

      // height will be height of image frame + share button
      var new_height = $('.image_frame').height() + $('.share').height();

      // if the social options are visible, add that to height as well
      if ($('.social_options').is(':visible'))
          new_height += $('.social_options').height();

      $('.synopsis').dotdotdot({
            ellipsis    : '... ',
            wrap        : 'word',
            after       : null,
            watch       : true,
            height      : new_height
      });

    });        
});

您也可以通过创建执行 dotdotdot-ing 的函数来防止冗余代码。在页面加载时调用它，然后在每个后续的切换调用中调用它。