jqueryを使用してコンテンツのスライドダウン効果をより詳細に読む方法

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

、あなたがの遅延ロードを使用するかどうかを決定する必要があります内容かどうか。二つの解決策：

1. あなたは、単に記事全体をロードして、ページの読み込みに読み取りよりセクションを非表示にします。私は第一を使用する必要があなたは

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