javascript - 显示更多代码在 HTML 中无法正常工作

Question

我正在使用代码在我的页面的 HTML 和 CSS 中显示更多/显示更少的长段落。

代码工作正常。(所有代码将在下面显示)。但是当文本在 <p> 中时标签，它不起作用。当我点击显示更多时，全文消失了。

如果我删除 <p>标签，显示更多功能正常工作。

例如:

<div class="moreless">
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
     </p>
     <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
</div>

如果我写上面的文字时没有 <p>标记它有效。

我是否遗漏了一些代码？

这是我使用的代码:

HTML:

<div class="moreless">
  <p>Lorem ipsum.....
  </p>
</div>

CSS:

p {
    color: #777777;
    line-height: 24px;
    margin: 0 0 20px;
    text-align: justify;
}

.morecontent span {
    display: none;
}
.morelink {
    display: block;
    line-height: 45px
}

Javascript:

$(document).ready(function() {
    var showChar = 300;  
    var ellipsestext = "...";
    var moretext = "Show more";
    var lesstext = "Show less";


   $('.moreless').each(function() {
        var content = $(this).html();

        if(content.length > showChar) {

            var c = content.substr(0, showChar);
            var h = content.substr(showChar, content.length - showChar);

            var html = c + '<span class="moreellipses">' + ellipsestext+     '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

            $(this).html(html);
        }

    });

    $(".morelink").click(function(){
        if($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });
});

Answer 1

最好获取 .text() - 而不是 .html() - 然后获取 .substring(0,300) 并使用 .toggleClass() 带有要隐藏或显示的段落。

看这个例子

var showChar = 300;
var moretext = "Show more";
var lesstext = "Show less";

$(".moreless").each(function() {
  var ellipsestext = $(this).text() <= showChar ? "" : "...";
  //append shrinked text
  $(this).append("<p class='shrink'>" + $(this).text().substring($(this).text().indexOf("\n") + 2, showChar).replace(/\n/g, "<br/>") + ellipsestext + "</p>");
  //append readmore button
  $(this).append('<a href="#" class="moreellipses">' + moretext + '</a>');
  //control visibility by class names
  $(this).find(".shrink").addClass("dsp");
  $(this).children().not(".shrink, .moreellipses").addClass("hdn");
});



$(".moreellipses").click(function() {
  $(this).closest(".moreless").find(".shrink").toggleClass("hdn");
  $(this).closest(".moreless").children().not(".shrink, .moreellipses").toggleClass("hdn");
  $(this).text($(this).text() == moretext ? lesstext : moretext);
  return false;
})

.dsp {
  display: block;
}
.hdn {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="moreless">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>