https://www.taiseihome.jp/additional_file/assets/js/main.js

1let fnc = {
2    headerMenu() {
3        // メニューアイテムとドロップダウンメニューを取得
4        var menuItems = document.querySelectorAll('.menubtn');
5
6        // メニューアイテムが存在するか確認
7        if (menuItems.length > 0) {
8            // 各メニューアイテムにイベントリスナーを追加
9            menuItems.forEach(function (menuItem) {
10                // メニューアイテムの兄弟要素であるドロップダウンメニューを取得
11                var dropdownMenu = menuItem.nextElementSibling;
12
13                // ドロップダウンメニューが存在するか確認
14                if (dropdownMenu && dropdownMenu.classList.contains('sub')) {
15                    var timeoutId; // タイムアウトのIDを格納する変数
16
17                    // メニューアイテムにマウスが入ったとき
18                    menuItem.addEventListener('mouseenter', function () {
19
20                        // タイムアウトが設定されていればクリア
21                        if (timeoutId) {
22                            clearTimeout(timeoutId);
23                            timeoutId = null;
24                        }
25
26                        // 他のメニューアイテムからドロップダウンを非表示にする
27                        menuItems.forEach(function (otherMenuItem) {
28                            if (otherMenuItem !== menuItem) {
29                                var otherDropdownMenu = otherMenuItem.nextElementSibling;
30                                if (otherDropdownMenu && otherDropdownMenu.classList.contains('sub')) {
31                                    otherDropdownMenu.classList.remove('active');
32                                }
33                            }
34                        });
35
36                        // ドロップダウンメニューを表示する
37                        dropdownMenu.classList.add('active');
38
39                        // menubtnの上端位置を取得
40                        var menubtnTop = menuItem.getBoundingClientRect().top;
41
42                        // 上端位置にプラスして適用する値を計算
43                        var newPosition = 100 - menubtnTop;
44
45                        // topプロパティを設定
46                        dropdownMenu.style.top = newPosition + 'px';
47                    });
48
49                    // ドロップダウンメニューからマウスが出たとき
50                    dropdownMenu.addEventListener('mouseleave', function () {
51                        // タイムアウトを設定して一定時間後に非表示にする
52                        timeoutId = setTimeout(function () {
53                            // ドロップダウンメニューを非表示にする
54                            dropdownMenu.classList.remove('active');
55                        }, 500); // 0.5秒後に非表示にする（500ミリ秒）
56                    });
57
58                    // メニューアイテムからマウスが出たとき
59                    menuItem.addEventListener('mouseleave', function () {
60                        // タイムアウトが設定されていればクリア
61                        if (timeoutId) {
62                            clearTimeout(timeoutId);
63                            timeoutId = null;
64                        }
65
66                        // タイムアウトを設定して一定時間後に非表示にする
67                        timeoutId = setTimeout(function () {
68                            // ドロップダウンメニューを非表示にする
69                            dropdownMenu.classList.remove('active');
70                        }, 500); // 0.5秒後に非表示にする（500ミリ秒）
71                    });
72
73                    // ドロップダウンメニューにマウスが入ったとき
74                    dropdownMenu.addEventListener('mouseenter', function () {
75                        // タイムアウトが設定されていればクリア
76                        if (timeoutId) {
77                            clearTimeout(timeoutId);
78                            timeoutId = null;
79                        }
80                    });
81                }
82            });
83        }
84    },
85    acc(elm) {
86        const slideDown = (el) => {
87            el.style.height = 'auto';
88            let h = el.offsetHeight;
89            el.style.height = h + 'px';
90            el.animate([
91                { height: 0 },
92                { height: h + 'px' }
93            ], {
94                duration: 300
95            });
96        };
97
98        const slideUp = (el) => {
99            el.style.height = 0;
100        };
101
102        let activeIndex = null;
103
104        const handleResize = () => {
105            accordions.forEach((accordion) => {
106                const accordionBtns = accordion.querySelectorAll('.accordionBtn');
107                accordionBtns.forEach((accordionBtn, index) => {
108                    const content = accordionBtn.nextElementSibling;
109                    if (index === activeIndex && accordionBtn.parentNode.classList.contains('active')) {
110                        slideDown(content);
111                    } else {
112                        slideUp(content);
113                    }
114                });
115            });
116        };
117
118        const accordions = document.querySelectorAll(elm);
119        accordions.forEach((accordion) => {
120            const accordionBtns = accordion.querySelectorAll('.accordionBtn');
121            accordionBtns.forEach((accordionBtn, index) => {
122                accordionBtn.addEventListener('click', (e) => {
123                    activeIndex = index;
124                    e.target.parentNode.classList.toggle('active');
125                    const content = accordionBtn.nextElementSibling;
126                    if (e.target.parentNode.classList.contains('active')) {
127                        slideDown(content);
128                    } else {
129                        slideUp(content);
130                    }
131                    accordionBtns.forEach((accordionBtn, index) => {
132                        if (activeIndex !== index) {
133                            accordionBtn.parentNode.classList.remove('active');
134                            const openedContent = accordionBtn.nextElementSibling;
135                            slideUp(openedContent);
136                        }
137                    });
138                    let container = accordion.closest('.scroll-control');
139                    if (accordionBtn.parentNode.classList.contains('active') == false && container !== null) {
140                        container.classList.remove('active')
141                    } else if (container !== null) {
142                        container.classList.add('active')
143                    }
144                });
145            });
146        });
147
148        window.addEventListener('resize', handleResize);
149        handleResize();
150    },
151    acch() {
152        const slideDown = (el) => {
153            el.style.height = 'auto';
154            let h = el.offsetHeight;
155            el.style.height = h + 'px';
156            el.animate([
157                { height: 0 },
158                { height: h + 'px' }
159            ], {
160                duration: 300
161            });
162            setTimeout(() => {
163                el.style.height = 'auto';
164            }, 400);
165        };
166
167        const slideUp = (el) => {
168            let h = el.offsetHeight;
169            el.style.height = h + 'px';
170            setTimeout(() => {
171                el.style.height = 0;
172            }, 50);
173        };
174
175        let activeIndex = null;
176
177        const handleResize = () => {
178            accordions.forEach((accordion) => {
179                const accordionBtns = accordion.querySelectorAll('.accordionBtn');
180                accordionBtns.forEach((accordionBtn, index) => {
181                    const content = accordionBtn.nextElementSibling;
182                    if (index === activeIndex && accordionBtn.parentNode.classList.contains('active')) {
183                        slideDown(content);
184                    } else {
185                        slideUp(content);
186                    }
187                });
188            });
189        };
190
191        const accordions = document.querySelectorAll('header');
192        accordions.forEach((accordion) => {
193            const accordionBtns = accordion.querySelectorAll('.ac');
194            accordionBtns.forEach((accordionBtn, index) => {
195                accordionBtn.addEventListener('click', (e) => {
196                    activeIndex = index;
197                    e.target.parentNode.classList.toggle('active');
198                    const content = document.querySelector('.header__menu')
199                    if (e.target.parentNode.classList.contains('active')) {
200                        slideDown(content);
201                    } else {
202                        slideUp(content);
203                    }
204                    accordionBtns.forEach((accordionBtn, index) => {
205                        if (activeIndex !== index) {
206                            accordionBtn.parentNode.classList.remove('active');
207                            const openedContent = document.querySelector('.header__menu')
208                            slideUp(openedContent);
209                        }
210                    });
211                    let container = accordion.closest('.scroll-control');
212                    if (accordionBtn.parentNode.classList.contains('active') == false && container !== null) {
213                        container.classList.remove('active')
214                    } else if (container !== null) {
215                        container.classList.add('active')
216                    }
217                });
218            });
219        });
220
221        window.addEventListener('resize', handleResize);
222        handleResize();
223    },
224    retop() {
225        document.querySelector('.retop').addEventListener('click', () => {
226            window.scrollTo({
227                top: 0,
228                behavior: "smooth"
229            });
230        })
231    }
232
233};
234
235document.addEventListener("DOMContentLoaded", function () {
236    if (window.innerWidth >= 991) {
237        fnc.headerMenu();
238        fnc.retop()
239    }
240    if (window.innerWidth <= 990) {
241        fnc.acc('footer');
242        fnc.acc('header');
243        fnc.acch();
244    }
245    
246});
247
248window.addEventListener('resize', function () {
249    if (window.innerWidth >= 991) {
250        fnc.headerMenu();
251    }
252});