Php 如何使用jquery为内容提供具有向下滑动效果的更多阅读

我正在用php生成一个新闻部分，我想继续阅读博客文章。当用户单击“继续阅读”时，我将使所有新闻文章向下滑动。 以下是我的代码：

<?php foreach ($news as $newsItem) : ?>
    <div class="news-item" id="news-<?php echo $newsItem->id; ?>">
        <a href="#" class="image"><img src="/path/to/my/image" 
            alt="<?php echo $newsItem->photo; ?>" /></a>
        <h4><a><?php echo $newsItem->title; ?></a></h4>
        <p><?php echo $newsItem->content; ?></p>
        <a class="read-more" href="<?php echo ROOT_PATH; ?>front/site/news">Read more</a>
    </div>
<?php endforeach; ?>

---

首先，jQuery代码段应该如下所示：

$(function() { // Only when DOM is ready $('a.read-more').on('click', function() { // Your code } }); $（函数（）{//仅当DOM就绪时 $（'a.read-more'）。在（'click'，function（）上{ //你的代码 } }); 然后，您需要决定是否使用延迟加载内容。有两种解决方案：

您只需加载整篇文章并隐藏页面加载上的“阅读更多”部分

使用AJAX从数据库加载内容（使用新闻id）

jQuery

$(function(){
    $('a.read-more').on('click', function(){
         //find local hidden area and show it with nice slide effect
         $(this).parent().find('div.hidden-more').slideDown();
    });
});

---

我需要使用第一种解决方案，因为我需要隐藏一篇文章的大约50个字符，当我单击“阅读更多”时，它应该将其余内容向下滑动，与我想要实现的内容非常接近，但我希望加载所有内容，使用jquery只显示第一部分，隐藏第二部分，当单击“阅读更多”时向下滑动第二部分实际上是在Chrome和IE上工作，不能在Firefox上试用。但是我发现没有从内容中删除省略号，所以这里有一个新版本：是的，好的，但是我如何生成文章的第一部分和文章的其余部分…我不想像那样保存在数据库中，我想用jquery只显示第一部分部分内容，当点击显示REST时，使用php进行连接时，使用子字符串。我不是一个php高手，但你应该能够获取一个变量并将字符数限制为50，然后从同一个db记录中使用同一个变量并删除前50个。

<?php foreach ($news as $newsItem) : ?>
   <div class="news-item" id="news-<?php echo $newsItem->id; ?>">
    <a href="#" class="image"><img src="/path/to/my/image" 
        alt="<?php echo $newsItem->photo; ?>" /></a>
    <h4><a><?php echo $newsItem->title; ?></a></h4>

    <!-- echo first part of the article here -->
    <p><?php echo $newsItem->content-summary; ?></p>
    <div class="hidden-more">

       <!-- echo the remainder of the article here -->
       <p><?php echo $newsItem->content-remaining; ?></p>   
    </div>
    <a class="read-more" href="<?php echo ROOT_PATH; ?>front/site/news">Read more</a>
   </div>
<?php endforeach; ?>

div.hidden-more{
    display:none;
}

$(function(){
    $('a.read-more').on('click', function(){
         //find local hidden area and show it with nice slide effect
         $(this).parent().find('div.hidden-more').slideDown();
    });
});