Question

我有一个固定的div高度，有一些文字溢出。我已将溢出设置为hidden，并希望展开div height以显示内部的其余内容（如果按下了链接）;然后在再次按下链接时将div返回到其初始高度。我遇到了以下question这是我想要的，但是他们的文本被分解为2个p标签，而我只有一个。我尝试了这个但是我收到以下错误：

Unable to get property 'scrollHeight' of undefined or null reference

这是我的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');

    }
  }

});

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

1 个答案: