jquery - show moreが機能しないjqueryコード

Question

1行のみを表示するはずのこのコードがありますが、最初の行のみを表示する代わりに、完全なコンテンツを表示します。「もっと見る」ボタンをクリックすると、サイドが一番上までスクロールします。

PHP:

/* Inside a loop */

<?php 
    $full_text = get_the_content();
    $period_pos = strpos($full_text, ".");
    $excerpt = substr($full_text, 0, $period_pos+1);    // Get the first line, assuming that a line ends with a period.
    $rest = substr($full_text, $period_pos+1);          // Get the rest of the text  ?>  <div class="excerpt">
    <?php echo $excerpt; ?>  </div>  <div class="rest">
    <?php echo $rest; ?>  </div>  <div class="show-more-div">
    <a href="#" class="show-more">Show more</a>  </div>

jQuery:

$(document).ready(function(){
    $(".show-more").click(function(){
         $(this).parent().prev().slideDown();     
    });
});

Answer 1

div.restCSS を使用して非表示の要素から始める必要があります。
次に、リンクをクリックすると、適切な div can slideDown().

div.rest {
    display:none;
}

ここに作業サンプルがあります。

編集：

href のデフォルトのクリック動作を防ぐために、ハンドラーに追加return false;することもお勧めします。click

$(document).ready(function () {
    $(".show-more").click(function () {
        $(this).parent().prev().slideDown();
        return false;
    });
});

http://jsfiddle.net/PxejR/1/

Answer 2

$(".show-more").on("click",function(){

       $(this).parent().prev().slideDown();     
  });