teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

調整

2021/07/14 04:44

投稿

yambejp
yambejp

スコア117902

answer CHANGED
@@ -3,10 +3,44 @@
3
3
  ハンバーガーメニューなのでチェックボックスでやるか
4
4
  クラスでやるか次第だと思いますが・・・
5
5
  ```javascript
6
+ <style>
7
+ #chk,#chk:not(:checked) ~ ul li{display:none}
8
+ </style>
6
9
  <script>
7
10
  window.addEventListener("resize",()=>{
11
+ g1.style.display="";
12
+ g2.style.display="none";
8
13
  chk.checked=false;
9
14
  });
10
15
  </script>
16
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" height="48" width="48">
17
+ <rect width="48" height="48" id="r1" style="opacity:0" />
18
+ <g id="g1">
19
+ <line x1="10" y1="12" x2="38" y2="12" stroke="black"/>
20
+ <line x1="10" y1="24" x2="38" y2="24" stroke="black"/>
21
+ <line x1="10" y1="36" x2="38" y2="36" stroke="black"/>
22
+ </g>
23
+ <g id="g2" style="display:none">
24
+ <rect width="48" height="48" fill="none" />
25
+ <line x1="12.13" y1="12.63" x2="36.13" y2="36.13" stroke="black"/>
26
+ <line x1="12.38" y1="36.38" x2="35.88" y2="12.38" stroke="black"/>
27
+ </g>
28
+ <g>
29
+ </g>
30
+ <script>
31
+ r1.addEventListener('click',()=>{
32
+ const flg=g1.style.display=="none";
33
+ g1.style.display=flg?"":"none";
34
+ g2.style.display=flg?"none":"";
35
+ chk.checked=!flg;
36
+ });
37
+ </script>
38
+ </svg>
11
39
  <input type="checkbox" id="chk">
40
+ <ul>
41
+ <li>1</li>
42
+ <li>2</li>
43
+ <li>3</li>
44
+ <ul>
45
+
12
46
  ```