Question

我正在使用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; ?>

$('body').on('click', 'a.read-more', function(){
    // what should happen here?
})

Answer 1

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

$(function() { // Only when DOM is ready
  $('a.read-more').on('click', function() {
    // Your code
  }
});

然后，您需要决定是否使用延迟加载内容。两种解决方案：

您只需加载整篇文章，并在页面加载时隐藏 read-more 部分。
您使用AJAX从数据库加载内容（使用您的新闻ID）

Answer 2

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

css

div.hidden-more{
    display:none;
}

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();
    });
});

如何使用jquery对内容进行下拉效果更多阅读

2 个答案: