Question

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

代码工作正常。（所有代码将显示在下面）。但是当文本位于<p>标记内时，它无法正常工作。当我点击显示更多时，全文消失。

如果我删除了<p>标记，则show more功能可以正常工作。

例如：

<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>

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

1 个答案: