javascript - 在动态设置 div 高度动画时切换文本

Question

我有一个固定的 div 高度，其中有些文本会溢出。我已将溢出设置为 hidden 并希望扩展 div height 以在按下链接时显示内部的其余文本；然后在再次按下链接时将 div 返回到其初始高度。我遇到了以下 question这就是我想要的，但是他们的文本被分成 2 个 p 标签，而我只有一个。我试过了，但出现以下错误:

无法获取未定义或 null 引用的属性“scrollHeight”

这是我的 code

如有任何帮助，我们将不胜感激。

Answer 1

问题是获取元素..

check the result

$(function() {

  if ($('#dialog-box').is(':visible')) {
    showMoreTextDialog();
  }

  function showMoreTextDialog() {

    var dialog_txt = $('.dialog_middle p').html();

    if (dialog_txt.length > 350) {

      var append_dialog = dialog_txt.substr(0, 350);

      $('.dialog_middle p')
        .html(append_dialog)
        .append('<span class="showMore">    (.... Show More )</span>');

      $('.dialog_middle')
        .data("original-height", $(".dialog_middle")[0].scrollHeight);

      $(document).on({
        'mouseover': function() {
          $(this).css('cursor', 'pointer');
        },
        'click': function() {

          $('.dialog_middle p')
            .html(dialog_txt)
            .append('<span class="showLess">    (.... Show Less )</span>');

          $('.dialog_middle')
            .animate({
              height: $(".dialog_middle")[0].scrollHeight
            }, 2000);

        }
      }, '.dialog_middle .showMore');

      $(document).on({
        'mouseover': function() {
          $(this).css('cursor', 'pointer');
        },
        'click': function() {

          $('.dialog_middle')
            .animate({
              height: $(".dialog_middle").data("original-height")
            }, 2000, function() {

              $('.dialog_middle p')
                .html(append_dialog)
                .append('<span class="showMore">    (.... Show More )</span>');

            });

        }
      }, '.dialog_middle .showLess');

    }
  }

});