【jQuery】アコーディオン、エリア外からのアンカーでアコーディオンが開く、そしてアンカー場所へ移動する。

【jQuery】アコーディオン、エリア外からのアンカーでアコーディオンが開く、そしてアンカー場所へ移動する。
あのー、アンカーリンクのボタンを押したらアコーディオンが開いてその中にあるアンカーリンクの場所にスルスルーと移動させたいのですが可能ですかね?
なんだかややこしそうですが、やってみましょうかー

さっそく実装してみる

See the Pen 【jQuery】アコーディオン、エリア外からのアンカーでアコーディオンが開く、そしてアンカー場所へ移動する。 by 125naroom (@125naroom) on CodePen.

HTMLとCSSとjQueryはこちら

HTML

<section class="section">
  <div class="anchor">
    <ul>
      <li>
        <a href="#anchor1">アンカー1へ</a>
      </li>
      <li>
        <a href="#anchor2">アンカー2へ</a>
      </li>
      <li>
        <a href="#anchor3">アンカー3へ</a>
      </li>
    </ul>
  </div>
  <div class="more">もっとみる(アコーディオン)</div>
 
  <div class="one-detail hide">
    <div class="one-body" id="anchor1">
        <p>アンカー1</p>
    </div>
    <div class="one-body" id="anchor2">
        <p>アンカー2</p>
    </div>
    <div class="one-body" id="anchor3">
        <p>アンカー3</p>
    </div>
  </div>
</section>

CSS

絶対に必要なものだけ記載しておきます。デザインはおまかせしますー。

.hide {
  display: none;
}

jQuery

一行解説したいところですが、ざっくり説明すると、スルスルーとスクロール設定、待機設定、アコーディオン設定、アンカーからのアコーディオン設定、をしています。

$(function(){
  //scrollTo
  function scrollTo(_target, _offset){
    var
      _f = true,
      _s = 500,
      _t = 0;
 
    if(_target && _target.length){
      try{
        _t = _target.offset().top;
      }
      catch(e){
        _f = false;
      }
    }
    if(_offset !== undefined){
      _t = Math.max(0, _t + _offset);
    }
    if(_f){
      $('body, html').animate({scrollTop: _t}, _s, 'swing');
    }
  }
  //wait
  $.wait = function(msec) {
    var d = new $.Deferred;
 
    setTimeout(function(){
      d.resolve(msec);
    }, msec);
 
    return d.promise();
  };
  //more
  $('.section').find('.more').click(function(){
    var _p = $(this).closest('.section');
    _p
      .toggleClass('is-open')
      .find('.one-detail').slideToggle(250);
 
    if(_p.hasClass('is-open')){
      $.when(function(){
        return $.wait(100);
      }())
        .then(function(){
        scrollTo(_p.find('.one-detail'), -48.8);
      });
    }
    return false;
  });
  //anchor + open
  $('.section').find('.anchor').find('a').unbind().click(function(){
    var
      _p      = $(this).closest('.section'),
      _target = $($(this).attr('href')),
      _wait   = 300;
 
    if(_p.hasClass('is-open')){
      _wait = 100;
    }
 
    _p
      .addClass('is-open')
      .find('.one-detail').show();
 
    $.when(function(){
      return $.wait(_wait);
    }())
      .then(function(){
      scrollTo(_target, -0);
    });
    return false;
  });
});

メモ

jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるのをおすすめします。

さいごに

おー、これですー
なかなかややこしかったですねー。さ、甘いもの食べに行きましょうー

関連記事

Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

3

/

29

2024

Googleさんの
おすすめ

3

/

29

2024

デザインの記事

であうにあう編集部 | niko and …
ケの日のケケケ
【CSS】counter-incrementを使って擬似要素をリスト化する