https://www.1242.com/lf/asset/themes/1242/assets/js/global.js

1function viewport() {
2  var a = navigator.userAgent;
3  if (
4    a.indexOf("iPhone") > 0 ||
5    a.indexOf("iPod") > 0 ||
6    (a.indexOf("Android") > 0 && a.indexOf("Mobile") > 0)
7  ) {
8    $("head").prepend(
9      '<meta name="viewport" content="width=device-width,initial-scale=1">',
10    );
11  } else {
12    $("head").prepend('<meta name="viewport" content="width=1300">');
13  }
14}
15
16function headnav() {
17  // nav-sub-btn のクリック処理
18  document.querySelectorAll('.nav-sub-btn').forEach((btn) => {
19    btn.addEventListener('click', function () {
20      this.classList.toggle('active');
21
22      const navSub = this.nextElementSibling;
23      if (navSub && navSub.classList.contains('nav-sub')) {
24        slideToggle(navSub);
25      }
26      const header = document.querySelector('.header');
27
28
29      if (this.classList.contains('active')) {
30        // ON: 開く動作
31        if (header) header.classList.add('active');
32        document.documentElement.classList.add('is-menu-open');
33
34      } else {
35        // OFF: 戻す動作
36        document.documentElement.classList.remove('is-menu-open');
37        setTimeout(() => {
38          if (header) header.classList.remove('active');
39
40        }, 300);
41      }
42    });
43  });
44}
45
46// footer menu
47function footermenu(e) {
48  const isSp = e.matches;
49
50  document.querySelectorAll('.footer-link-group-ttl').forEach((ttl) => {
51    const ul = ttl.nextElementSibling;
52
53    if (!ul || ul.tagName.toLowerCase() !== 'ul') return;
54
55    if (isSp) {
56      // SP：クリック有効化
57      ttl.addEventListener('click', toggleHandler);
58    } else {
59      // PC：状態リセット
60      ttl.classList.remove('active');
61      ul.style.removeProperty('display');
62      ul.style.removeProperty('height');
63
64      ttl.removeEventListener('click', toggleHandler);
65    }
66  });
67}
68
69function toggleHandler() {
70  const ul = this.nextElementSibling;
71  slideToggle(ul);
72  this.classList.toggle('active');
73}
74
75/* ----- slideToggle (簡易版) ----- */
76function slideToggle(element, duration = 300) {
77  if (window.getComputedStyle(element).display === 'none') {
78    // slideDown
79    element.style.removeProperty('display');
80    let display = window.getComputedStyle(element).display;
81    if (display === 'none') display = 'block';
82    element.style.display = display;
83
84    let height = element.offsetHeight;
85    element.style.height = 0;
86    element.style.overflow = 'hidden';
87
88    requestAnimationFrame(() => {
89      element.style.transition = `height ${duration}ms ease`;
90      element.style.height = height + 'px';
91    });
92
93    setTimeout(() => {
94      element.style.removeProperty('height');
95      element.style.removeProperty('overflow');
96      element.style.removeProperty('transition');
97    }, duration);
98  } else {
99    // slideUp
100    const height = element.offsetHeight;
101    element.style.height = height + 'px';
102    element.style.overflow = 'hidden';
103
104    requestAnimationFrame(() => {
105      element.style.transition = `height ${duration}ms ease`;
106      element.style.height = 0;
107    });
108
109    setTimeout(() => {
110      element.style.display = 'none';
111      element.style.removeProperty('height');
112      element.style.removeProperty('overflow');
113      element.style.removeProperty('transition');
114    }, duration);
115  }
116}
117
118// メディアクエリ
119const mql = window.matchMedia('(max-width: 768px)');
120
121document.addEventListener('DOMContentLoaded', () => {
122  headnav();
123  footermenu(mql);
124});
125
126// ブレイクポイント跨ぎ検知
127mql.addEventListener('change', footermenu);