0

jQueryを利用して、ページ内のコンテンツ(テキストや画像)をslideToggleで開閉式にしたいと考えています。
[閉じる]ボタンをクリックした歳に開閉式コンテンツ(#readmore-wrap)のトップにアニメーションで移動させたいと思っています。
私の書いたjsだと[続きを読む]をクリックした歳にも#readmore-wrapのトップに移動してしまいます。
希望としては以下になります。
javascripに明るくないため見当違いのコードかもしれませんが、ご意見いただければ幸いです。

  • [続きを読む]をクリックした歳はそのままコンテンツがslideToggleで表示。
  • [閉じる]ボタンをクリックした歳にはコンテンツが閉じるのと同時に開閉式コンテンツ(#readmore-wrap)のトップにアニメーションで移動

  var position = $("#readmore-btn-common").offset().top;
  jQuery(document).ready(function($){
    jQuery('#readmore-btn-common').click(function () {
      $("html,body").animate({
          scrollTop : position
      }, {
          queue : false
      });
        jQuery('#readmore-wrap').slideToggle(1000,function(){
          if (jQuery(this).is(':hidden')) {
            jQuery('#readmore-btn-common').html('<span id="readmore-btn-open" >続きを読む</span>');
          } else {
            jQuery('#readmore-btn-common').html('<span id="readmore-btn-close">閉じる</span>');
          }
        });
    });
  });
#readmore-wrap{
      display: none;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 開閉式コンテンツ -->
<div id="readmore-wrap">
  <!-- コンテンツの中身 -->
</div>
 <!-- /開閉式コンテンツ -->
<span id="readmore-btn-common"><span id="readmore-btn-open">続きをよむ</span></span>

1 件の回答 1

1

現在のソースコードをそのまま活用することを前提とするのであれば、
id=readmore-btn-commonの要素の中身をhtmlメソッドで全部書き換えているので、id=readmore-btn-closeの要素を生成する都度、clickイベントを追加してその中でトップに戻るための関数を動作させるようにしてはいかがでしょうか?

jQuery('#readmore-btn-common').html('<span id="readmore-btn-close">閉じる</span>');
jQuery("#readmore-btn-close").on("click", function(){
  console.log("click");
});

しかしながら、clickイベントトリガーを毎度宣言し直すのは良くないと思いますので、html関数で要素をまるごと書き換えるのではなく、text関数で文字列だけ変えて、class属性などを追加・削除するなどして工夫してみてはいかがでしょうか?

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。