質問編集履歴
5
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -246,20 +246,21 @@
|
|
|
246
246
|
open: function open() {
|
|
247
247
|
const _this = this;
|
|
248
248
|
_this.__Flag_open = true;
|
|
249
|
-
$('html').addClass('is-open');
|
|
250
249
|
},
|
|
251
250
|
close: function close() {
|
|
252
251
|
const _this = this;
|
|
253
252
|
_this.__Flag_open = false;
|
|
254
|
-
$('html').removeClass('is-open');
|
|
255
253
|
//うまくいかない記述
|
|
256
254
|
$('.l-header__menu .js-accordion').removeClass('is-active');
|
|
257
255
|
$('.l-header__menu .js-accordion').addClass('is-hidden');
|
|
258
|
-
$('.l-header__menu .js-
|
|
256
|
+
$('.l-header__menu .js-accordion__trigger').attr("aria-expanded", false);
|
|
259
257
|
$('.l-header__menu .js-accordion__panel').attr("aria-hidden", true);
|
|
260
258
|
$('.l-header__menu .js-accordion__panel').css({
|
|
261
259
|
maxHeight: "",
|
|
262
260
|
});
|
|
263
261
|
}
|
|
264
262
|
}
|
|
263
|
+
|
|
264
|
+
class Accordion {
|
|
265
|
+
}
|
|
265
266
|
```
|
4
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -161,62 +161,105 @@
|
|
|
161
161
|
}
|
|
162
162
|
|
|
163
163
|
```
|
|
164
|
+
|
|
165
|
+
####追記1
|
|
166
|
+
|
|
167
|
+
1点、実装中にうまくいかないことがありました。
|
|
168
|
+
スマホの際、ヘッダーのメニュー内にアコーディオンがあります。メニューを開いた後にアコーディオンを開き、メニューを閉じるとアコーディオンも開じるようにしたいです。開いたままですと、メニュー内の文字のアニメーションができなくなることが判明しました。
|
|
169
|
+
|
|
170
|
+
メニューを閉じた際にアコーディオンも閉じる処理を無理矢理書いたのですが、アコーディオンのjavascriptでの判定ですと閉じていないため、再度メニューを開いた際に2度クリックしないとアコーディオンが開かないのが現状となります。
|
|
171
|
+
|
|
172
|
+
```html
|
|
173
|
+
<header class="l-header" role="banner">
|
|
174
|
+
<div class="l-header__inner">
|
|
175
|
+
<div class="l-header__menu">
|
|
176
|
+
<div class="l-header__menu-inner">
|
|
177
|
+
<nav class="l-header__menu-nav">
|
|
178
|
+
<ul class="l-header__menu-nav-list">
|
|
179
|
+
<li class="l-header__menu-nav-item">
|
|
180
|
+
<div class="c-accordion js-accordion">
|
|
181
|
+
<button type="button" class="c-accordion__trigger js-accordion__trigger">
|
|
182
|
+
<span class="c-headline-lv2">アコーディオンタイトル</span>
|
|
183
|
+
</button>
|
|
184
|
+
<div class="c-accordion__panel js-accordion__panel">
|
|
185
|
+
<div class="c-accordion__content">
|
|
186
|
+
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
|
|
187
|
+
</div>
|
|
188
|
+
</div>
|
|
189
|
+
</div>
|
|
190
|
+
<div class="c-accordion js-accordion">
|
|
191
|
+
<button type="button" class="c-accordion__trigger js-accordion__trigger">
|
|
192
|
+
<span class="c-headline-lv2">アコーディオンタイトル</span>
|
|
193
|
+
</button>
|
|
194
|
+
<div class="c-accordion__panel js-accordion__panel">
|
|
195
|
+
<div class="c-accordion__content">
|
|
196
|
+
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
|
|
197
|
+
</div>
|
|
198
|
+
</div>
|
|
199
|
+
</div>
|
|
200
|
+
</li>
|
|
201
|
+
</ul>
|
|
202
|
+
</nav>
|
|
203
|
+
</div>
|
|
204
|
+
</div>
|
|
205
|
+
<button type="button" class="l-header__hamburger">
|
|
206
|
+
<span class="l-header__hamburger-inner">
|
|
207
|
+
<span class="l-header__hamburger-bars">
|
|
208
|
+
<span class="l-header__hamburger-bar"></span>
|
|
209
|
+
<span class="l-header__hamburger-bar"></span>
|
|
210
|
+
<span class="l-header__hamburger-bar"></span>
|
|
211
|
+
</span>
|
|
212
|
+
</span>
|
|
213
|
+
</button>
|
|
214
|
+
</div>
|
|
215
|
+
</header>
|
|
216
|
+
```
|
|
217
|
+
|
|
164
218
|
```javascript
|
|
165
|
-
|
|
219
|
+
$(function () {
|
|
220
|
+
menu.onInit();
|
|
221
|
+
});
|
|
222
|
+
|
|
223
|
+
// ----------------------------------------
|
|
224
|
+
// メニュー
|
|
225
|
+
// ----------------------------------------
|
|
166
|
-
|
|
226
|
+
const menu = {
|
|
167
|
-
|
|
227
|
+
onInit: function onInit() {
|
|
168
|
-
this.tabs = this.element.querySelector('.js-accordion__trigger');
|
|
169
|
-
this.panels = this.element.querySelector('.js-accordion__panel');
|
|
170
|
-
this.
|
|
228
|
+
this.__Flag_open = false;
|
|
229
|
+
this.$menu = $(".l-header__menu");
|
|
230
|
+
this.$button = $(".l-header__hamburger");
|
|
171
|
-
|
|
231
|
+
$(document).on({
|
|
232
|
+
click() {
|
|
233
|
+
if (!menu.__Flag_open) {
|
|
172
|
-
|
|
234
|
+
menu.open();
|
|
235
|
+
} else {
|
|
173
|
-
|
|
236
|
+
menu.close();
|
|
237
|
+
}
|
|
238
|
+
},
|
|
239
|
+
}, '.l-header__hamburger');
|
|
240
|
+
$(document).on({
|
|
241
|
+
click() {
|
|
242
|
+
menu.close();
|
|
243
|
+
},
|
|
244
|
+
}, '.l-header__menu a[href]');
|
|
245
|
+
},
|
|
246
|
+
open: function open() {
|
|
247
|
+
const _this = this;
|
|
248
|
+
_this.__Flag_open = true;
|
|
249
|
+
$('html').addClass('is-open');
|
|
250
|
+
},
|
|
251
|
+
close: function close() {
|
|
252
|
+
const _this = this;
|
|
253
|
+
_this.__Flag_open = false;
|
|
254
|
+
$('html').removeClass('is-open');
|
|
255
|
+
//うまくいかない記述
|
|
256
|
+
$('.l-header__menu .js-accordion').removeClass('is-active');
|
|
257
|
+
$('.l-header__menu .js-accordion').addClass('is-hidden');
|
|
258
|
+
$('.l-header__menu .js-accordion__tab').attr("aria-expanded", false);
|
|
259
|
+
$('.l-header__menu .js-accordion__panel').attr("aria-hidden", true);
|
|
260
|
+
$('.l-header__menu .js-accordion__panel').css({
|
|
261
|
+
maxHeight: "",
|
|
262
|
+
});
|
|
174
263
|
}
|
|
175
|
-
events() {
|
|
176
|
-
this.tabs.addEventListener('click', this.handleClick.bind(this));
|
|
177
|
-
this.panels.addEventListener('transitionend', this.handleTransition.bind(this));
|
|
178
|
-
}
|
|
179
|
-
handleClick() {
|
|
180
|
-
if (this.isOpen) {
|
|
181
|
-
this.close();
|
|
182
|
-
} else {
|
|
183
|
-
this.open();
|
|
184
|
-
this.height = this.panels.scrollHeight;
|
|
185
|
-
console.log(this.height);
|
|
186
|
-
}
|
|
187
|
-
}
|
|
188
|
-
open() {
|
|
189
|
-
this.isOpen = true;
|
|
190
|
-
this.element.classList.add('is-active');
|
|
191
|
-
this.element.classList.remove('is-hidden');
|
|
192
|
-
this.panels.style.maxHeight = `${0}px`;
|
|
193
|
-
this.tabs.setAttribute('aria-expanded', "true");
|
|
194
|
-
this.panels.setAttribute('aria-hidden', "false");
|
|
195
|
-
setTimeout(() => {
|
|
196
|
-
this.panels.style.maxHeight = `${this.height}px`;
|
|
197
|
-
}, 1);
|
|
198
|
-
}
|
|
199
|
-
close() {
|
|
200
|
-
this.isOpen = false;
|
|
201
|
-
this.element.classList.remove('is-active');
|
|
202
|
-
this.panels.style.maxHeight = `${this.height}px`;
|
|
203
|
-
this.tabs.setAttribute('aria-expanded', "false");
|
|
204
|
-
this.panels.setAttribute('aria-hidden', "true");
|
|
205
|
-
setTimeout(() => {
|
|
206
|
-
this.panels.style.maxHeight = `${0}px`;
|
|
207
|
-
}, 1);
|
|
208
|
-
}
|
|
209
|
-
handleTransition() {
|
|
210
|
-
if (!this.isOpen) {
|
|
211
|
-
this.element.classList.add('is-hidden');
|
|
212
|
-
}
|
|
213
|
-
this.panels.style.maxHeight = '';
|
|
214
|
-
}
|
|
215
264
|
}
|
|
216
|
-
Array.from(document.querySelectorAll('.js-accordion')).forEach((el) => {
|
|
217
|
-
new Accordion(el, {
|
|
218
|
-
tabs: this.tabs,
|
|
219
|
-
panels: this.panels
|
|
220
|
-
});
|
|
221
|
-
});
|
|
222
265
|
```
|
3
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
|
|
15
15
|
通常のアコーディオンとバッティングしてしまい、
|
|
16
16
|
処理の分岐をどうしていいかわからなくなりました。
|
|
17
|
+
|
|
17
18
|
もし書き方がわかる方がいましたら、教えていただけますと幸いです。
|
|
18
19
|
|
|
19
20
|
通常のアコーディオンのHTML
|
2
誤字
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
1つ開いたら、他が閉じる状態にしたいです。
|
|
10
10
|
|
|
11
11
|
今javascriptでできているの処理は通常のアコーディオンになります。
|
|
12
|
-
アコーディオンの中にアコーディオンがあるパターンやtriggerと
|
|
12
|
+
アコーディオンの中にアコーディオンがあるパターンやtriggerとpanelが同階層にない場合も想定してうまく動いています。
|
|
13
13
|
よくあるslideDownやslideUpのやり方ではなくmax-heightを使ったアコーディオンの処理としています。
|
|
14
14
|
|
|
15
15
|
通常のアコーディオンとバッティングしてしまい、
|
1
誤字
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
■アコーディオンを最初から開いた状態
|
|
4
4
|
htmlにis-activeというクラスをつけて、
|
|
5
|
-
開いた状態にしたいです。
|
|
5
|
+
最初から開いた状態にしたいです。
|
|
6
6
|
|
|
7
7
|
■アコーディオンを1つ開いたら、他が閉じる状態になる
|
|
8
8
|
htmlに--oneというクラスをつけて、
|