1

そのため、追加のコンテンツを表示および非表示にするために使用するアコーディオンのセットがあります。そのために jQuery の .animate() を使用しています (この場合は速度を使用していますが、本質的にはまったく同じです)。閉じた高さには数行のテキストが表示され (高さ: 95px)、開いた高さは高さ: 自動にアニメーション化されます (自動高さを取得するにはちょっとしたコツがあります)。逆に同じように、閉じた高さにアニメーションします。

私の問題は、jQuery dotdotdot http://dotdotdot.frebsite.nl/を追加して、閉じたものを切り捨てようとしていることです。もちろん、これをロード時に動作させることもできます。これは、上部のコメント部分です。

すべてがすでに読み込まれているコードペンを作成しました。誰かが 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