Question

我想在artice描述中的100个单词之后添加“显示更多”和“显示更少”功能：在此页面中http://devo.cutwatches.com/en/component/spsimpleportfolio/item/3-powerfull

我已经使用过这个鳕鱼但它不起作用，它给出了Uncaught TypeError：$不是函数

        <p class="show-read-more">
        <?php echo $this->item->description; ?>  </p>

和

  <script type="text/javascript">
$(document).ready(function(){
var maxLength = 300;
$(".show-read-more").each(function(){
    var myStr = $(this).text();
    if($.trim(myStr).length > maxLength){
        var newStr = myStr.substring(0, maxLength);
        var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
        $(this).empty().html(newStr);
        $(this).append(' <a href="javascript:void(0);" class="read- 
   more">read more...</a>');
        $(this).append('<span class="more-text">' + removedStr + '</span>');
    }
});
    $(".read-more").click(function(){
    $(this).siblings(".more-text").contents().unwrap();
    $(this).remove();
});
});
</script>


<style type="text/css">
    .show-read-more .more-text{
    display: none;
}

`

我用css尝试了它但它不起作用

我该如何解决？

Answer 1

你的HTML应该是这样的

<html>
  <head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  </head>
  <body>

  // Body

  <script type="text/javascript">
    $(document).ready(function(){
    var maxLength = 300;
    $(".show-read-more").each(function(){
        var myStr = $(this).text();
        if($.trim(myStr).length > maxLength){
            var newStr = myStr.substring(0, maxLength)  ;
            var removedStr = myStr.substring(maxLength, 
            $.trim(myStr).length);
            $(this).empty().html(newStr);
            $(this).append(' <a href="javascript:void(0);" class="read- 
   more">read more...</a>');
            $(this).append('<span class="more-text">' + removedStr + '</span>');
    }
});
    $(".read-more").click(function(){
    $(this).siblings(".more-text").contents().unwrap();
    $(this).remove();
});
});
</script>

 </body>
</html>

如果文本超过一定长度使用jQuery显示更多链接

1 个答案: