我想做一个阅读更多按钮，但我刚开始使用 javascript/jquery

Question

我想做一个阅读更多按钮，它会展开页面，文本会以漂亮的动画显示。我尝试编写 jquery 代码，但我意识到它不起作用，因此我将其删除。如果文本大于 200 个字符，将出现“阅读更多”按钮。我只有一些基本的东西，比如 this.

Javascript代码：

$("#clickme").click(function() {
 $("#hidden").show();
});

Answer 1

尝试使用这个：

$("#clickme").click(function() {
    $("#hidden").fadeIn("slow");
});

Answer 2

您可以使用许多 jquery 函数，例如 show(),fadeIn(),slideDown(),animate() 您甚至可以使用 css 转换

Answer 3

所以基本上你需要编写如下逻辑： 1：如果您使用的是 PHP，请检查字符串长度，然后登录可能如下所示：

 <?php $str = "I am in love with PHP";
if(strlen($str) > 10)
{
  $showten = substr($str, 0, 10);
echo $showten . "<a href="#" class='readmore'>Readmore</a>";
}
 ?>



<div class="all-content"><?php echo $str; ?></div>

现在 Jquery 开始行动了：

<script>
$(document).ready(function()
{
$('.readmore').click(function()
{
    $(this).closest("div").find(".all-content").toggle();
});
});
</script>

这是一个示例代码，您需要根据您的要求进行小的修改！！

Answer 4

您可以在此处找到不同的 jquery 动画。

http://api.jquery.com/animate/

Answer 5

请试试这个：

$("#clickme").click(function() {
    $("#hidden").fadeIn("slow");
});

Answer 6

<!DOCTYPE html>
<html>

<head>
  <style>
    a {
      color: #0254EB
    }

    a:visited {
      color: #0254EB
    }

    a.morelink {
      text-decoration: none;
      outline: none;
    }

    .morecontent span {
      display: none;
    }

    .comment {
      width: 400px;
      background-color: #f0f0f0;
      margin: 10px;
    }
  </style>
</head>

<body>
  <div class="comment more">
    <a href="http://eqlits.com">When a text is too long to fit, We can cut it short and add a "Read More" OR "Link" button.
       Clicking on this button will show the Next Page.</a>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet, nunc eget laoreet sagittis, quam ligula sodales
    orci, congue imperdiet eros tortor ac lectus. Duis eget nisl orci. Aliquam mattis purus non mauris blandit id luctus
    felis convallis. Integer varius egestas vestibulum. Nullam a dolor arcu, ac tempor elit. Donec.
  </div>
  <div class="comment more">
      <a href="http://eqlits.com">When a text is too long to fit, We can cut it short and add a "Read More" OR "Link" button.
        Clicking on this button will show the Next Page.</a>
    Duis nisl nibh, egestas at fermentum at, viverra et purus. Maecenas lobortis odio id sapien facilisis elementum. Curabitur
    et magna justo, et gravida augue. Sed tristique pellentesque arcu quis tempor.
  </div>
  <div class="comment more">
      <a href="http://eqlits.com">When a text is too long to fit, We can cut it short and add a "Read More" OR "Link" button.
        Clicking on this button will show the Next Page.</a>
    consectetur adipiscing elit. Proin blandit nunc sed sem dictum id feugiat quam blandit. Donec nec sem sed arcu interdum commodo
    ac ac diam. Donec consequat semper rutrum. Vestibulum et mauris elit. Vestibulum mauris lacus, ultricies.
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script>
    'use strict';
    function truncate(str, maxlength) {
      return (str.length > maxlength) ?
        str.slice(0, maxlength - 1) + `<input type='button' id='more' class="btnmore" value='Link'/>   ` : str;
    }

    let data = document.getElementsByClassName("more");
    for (let i = 0; i < data.length; i++) {
      let str = data[i].innerHTML;

      document.getElementsByClassName("more")[i].innerHTML = truncate(str, 300);
      document.getElementsByClassName("btnmore")[i].addEventListener("click", function () {
        document.getElementsByClassName("more")[i].innerHTML = str;
      })
    }




  </script>
</body>

</html>

我想做一个阅读更多按钮，但我刚开始使用 javascript/jquery

I am trying to do a Read More button, but I just started using javascript/jquery

html

css

jquery

expand

button