Question

我正在使用jquery代码显示更多/更少显示，它对于简单文本也可以正常工作。但是当文本具有一些p html标签时，它不起作用。当它的计划tex那么它可以正常工作，但是当它的html标签时，它就不能工作。请检查以下代码，我已经添加了html和js代码

<span class="my-message">
 <p style="text-align: left;">Lorem ipsum dolor sit amet, 
   consetetur sadipscing elitr, sed diam nonumy eirmod tempor
 invidunt ut labore et dolore magna aliquyam erat, sed diam 
  voluptua. At vero eos et accusam et justo 
 duo dolores et ea rebum. Stet clita kasd gubergren,  no sea 
 takimata sanctus est Lorem ipsum dolor sit amet.

 <p style="text-align: left;"><br></p>
 <p style="text-align: left;">Duis autem vel 
  eum iriure dolor in hendrerit in vulputate velit esse molestie 
  consequat, vel illum dolore eu feugiat nulla facilisis at vero 
   eros et accumsan et iusto odio dignissim qui blandit praesent 
  luptatum zzril delenit augue duis dolore te feugait nulla 
  facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing 
  elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
  magna aliquam erat volutpat.</p>
  <p style="text-align: left;"><br></p>
  <p style="text-align: left;">Ut wisi enim ad minim veniam, quis 
    nostrud exerci tation ullamco luptatum zzril delenit augue duis 
    dolore te feugait nulla facilisi.</p>
 </span>

    <script>
    var th = new showHideText('.my-message', {
        charQty     : 250,
        ellipseText : "...",
    });
    </script>

https://jsfiddle.net/f8xt9j32/

function showHideText(sSelector, options) {
 // Def. options
 var defaults = {
     charQty     : 100,
     ellipseText : "...",
     moreText    : "Show more",
     lessText    : "Show less"
 };

 var settings = $.extend( {}, defaults, options );

 var s = this;

     s.container = $(sSelector);
     s.containerH = s.container.height();

     s.container.each(function() {
         var content = $(this).html();

         if(content.length > settings.charQty) {

             var visibleText = content.substr(0, settings.charQty);
             var hiddenText  = content.substr(settings.charQty, content.length - settings.charQty);

             var html = visibleText
                      + '<span class="moreellipses">' +
                        settings.ellipseText
                      + '</span><span class="morecontent"><span>' +
                        hiddenText
                      + '</span><a href="" class="morelink">' +
                        settings.moreText
                      + '</a></span>';

             $(this).html(html);
         }

     });

     s.showHide = function(event) {
         event.preventDefault();
         if($(this).hasClass("less")) {
             $(this).removeClass("less");
             $(this).html(settings.moreText);

             $(this).prev().fadeToggle('fast', function() {
                 $(this).parent().prev().fadeIn();
             });
         } else {
             $(this).addClass("less");
             $(this).html(settings.lessText);

             $(this).parent().prev().hide();
             $(this).prev().fadeToggle('fast');
         }
     }

     $(".morelink").bind('click', s.showHide);
}
/*------------------------------------------*/

当文本带有一些HTML标签时，阅读更多功能不起作用

0 个答案: