jQuery 手风琴菜单上的 dotdotdot

Question

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

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

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

这里也是代码笔的link：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 });

    }
  });
});

Answer 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

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

jQuery 手风琴菜单上的 dotdotdot

jQuery dotdotdot on accordion menu

jquery

jquery-animate

dotdotdot