1

所以我有一套手风琴，用来显示和隐藏额外的内容。我正在使用 jQuery 的 .animate() 来执行此操作（在这种情况下，它使用的是速度，但基本上完全相同）。闭合高度显示几行文本（高度：95px），打开高度动画到高度：自动，（有点，有一个小技巧来获得自动高度）。反之亦然，它动画到闭合高度。

我的问题是，我正在尝试添加 jQuery dotdotdot http://dotdotdot.frebsite.nl/来截断封闭的。我当然可以让它在负载下工作，即顶部的注释部分。

我创建了一个已经加载所有内容的 codepen。我只是希望有人可以帮助我让 dotdotdot 部分正常工作。

这里也是 codepen 的链接：http: //codepen.io/anon/pen/pvaroR

jQuery(function($){

  //$('.accordion-content').dotdotdot();

  $('.accordion-title').on('click', function(){
    var content = $(this).next();

    if ($(this).parent().hasClass('open')) {
      content.velocity({ 'height' : 95 });
      $(this).parent().removeClass('open').addClass('closed');
    } else {

      // Sets height to auto quickly
      content.css({ 'height' : 'auto' });

      // Store that value in a variable
      var contentHeight = content.height();

      // Sets height back to "closed" height
      content.css({ 'height' : 95 });

      $(this).parent().removeClass('closed').addClass('open');

      // animates to strored variable height
      content.velocity({ 'height' : contentHeight });

    }
  });
});
4

1 回答 1

1

该dotdotdot插件不能很容易地将原始内容恢复为原始形式。我使用了originalContent事件的组合，然后重新初始化dotdotdot了手风琴内容。

伪代码如下所示：

when title is clicked {
    if content was open {
        call .dotdotdot on content
        animate height down to fit content
    } else content was closed {
        get original content and put it back
        get new height, set back to lower height, animate to regular height
    }
}

您可以在此处查看更新的 CodePen：http: //codepen.io/anon/pen/XJZaYP

在回调中.dotdotdot()被调用更新了 CodePen ： http ://codepen.io/anon/pen/myXzwWvelocity

于 2015-02-13T22:52:22.170 回答