<div class="sidebar">
<ul class="nav">
<li class="js-gnav-accordion">
<span class="js-gnav-accordion-target">見出し1</span>
<ul class="js-gnav-accordion-contents" style="display: none;">
<li><a href="">項目1</a></li>
<li><a href="">項目2</a></li>
<li><a href="">項目3</a></li>
<li><a href="">項目4</a></li>
<li><a href="">項目5</a></li>
</ul>
</li>
<li class="js-gnav-accordion">
<span class="js-gnav-accordion-target">見出し2</span>
<ul class="js-gnav-accordion-contents" style="display: none;">
<li><a href="">項目1</a></li>
<li><a href="">項目2</a></li>
<li><a href="">項目3</a></li>
<li><a href="">項目4</a></li>
<li><a href="">項目5</a></li>
<li><a href="">項目6</a></li>
</ul>
</li>
<li class="js-gnav-accordion">
<span class="js-gnav-accordion-target">見出し3</span>
<ul class="js-gnav-accordion-contents" style="display: none;">
<li><a href="">PoC提案</a></li>
<li><a href="">PoC向け<br>業務設計</a></li>
<li><a href="">分析設計</a></li>
<li><a href="">データ準備<br>・加工</a></li>
<li><a href="">基礎分析</a></li>
<li><a href="">モデル構築</a></li>
<li><a href="">データ翻訳</a></li>
<li><a href="">業務<br>組み込み</a></li>
<li><a href="">ROI算出</a></li>
<li><a href="">本格導入<br>提案</a></li>
</ul>
</li>
<li class="js-gnav-accordion">
<span class="js-gnav-accordion-target">見出し4</span>
<ul class="js-gnav-accordion-contents" style="display: none;">
<li><a href="">項目1</a></li>
<li><a href="">項目2</a></li>
<li><a href="">項目3</a></li>
<li><a href="">項目4</a></li>
<li><a href="">項目5</a></li>
<li><a href="">項目6</a></li>
<li><a href="">項目7</a></li>
<li><a href="">項目8</a></li>
</ul>
</li>
</ul>
</div>
import $ from 'jquery';
const SCROLL_EVENT = 'onwheel' in document ? 'wheel.accordion' : 'onmousewheel.accordion';
export default class Accordion {
constructor($target, className) {
this.$accordion = $target;
this.$accordionTarget = this.$accordion.find(`.${className}-target`);
this.$accordionContents = this.$accordion.find(`.${className}-contents`);
this.$allAccordion = $(`.${className}`);
this.$allAccordionContents = this.$allAccordion.find(`.${className}-contents`);
this.bindEvent();
}
bindEvent() {
this.$accordionTarget.on('click', () => {
if(this.$accordionContents.is(':animated')) {
return;
}
this.$accordion.hasClass('is-show') ? this.close() : this.open();
});
}
bindScrollEvent() {
$(document).on(SCROLL_EVENT, () => this.scrollCancel());
}
open() {
this.$allAccordionContents.slideUp();
this.$allAccordion.removeClass('is-show');
this.$accordionContents.slideDown(() => {
this.bindScrollEvent();
// 開閉後スクロールしたい場合
//$('body, html').animate({scrollTop: this.$accordion.offset().top - 100}, 500, 'swing');
});
this.$accordion.addClass('is-show');
}
close() {
this.$accordionContents.slideUp();
this.$accordion.removeClass('is-show');
}
scrollCancel() {
$('html, body').stop();
$(document).off(SCROLL_EVENT);
}
}
import $ from 'jquery';
import Accordion from './components/accordion';
/*
* PC/SP グロナビアコーディオン
* PC _sidebar.scss
* SP _nav-sp.scss
*
* 第一引数:jQueryオブジェクト
* 第二引数:オブジェクトのクラス名
*
*/
$('.js-gnav-accordion').each((i,e) => {
new Accordion($(e), 'js-gnav-accordion');
});