Question

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

我的问题是，我正在尝试添加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 });

    }
  });
});

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
    }
}

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

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

手风琴菜单上的jQuery dotdotdot

1 个答案: