

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

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

[code]

      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>');
              }
            });
        });
      });
[/code]

[code]

    #readmore-wrap{
          display: none;
      }
[/code]

[code]

    <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>
[/code]


CC BY-SA 3.0
2017-09-18T14:04:21.623
38018
2019-10-12T14:33:17.257
2019-10-12T14:33:17.257
32986
25455
question
jquery
jQueryの開閉式コンテンツをクリックで閉じるタイミングにコンテンツトップに移動したい


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

[code]

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

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


CC BY-SA 3.0
2017-09-19T05:14:52.947
38031
2017-09-19T05:14:52.947
2265
38018
answer