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

回答編集履歴

2

追記

2020/02/25 03:32

投稿

kyoya0819
kyoya0819

スコア10434

answer CHANGED
@@ -1,7 +1,31 @@
1
1
  jQuery使っていいなら、参考先に閉じる時のコードがあるから、丸々移植して
2
2
  ```jQuery
3
+
4
+ (function ($) {
5
+
6
+
7
+ /* ------------------------------- */
8
+
9
+ })(jQuery);
10
+
11
+
12
+ /* SP menu */
13
+ function toggleNav() {
14
+ var body = document.body;
15
+ var hamburger = document.getElementById('nav_btn');
16
+ var blackBg = document.getElementById('nav_bg');
17
+
18
+ hamburger.addEventListener('click', function() {
19
+ body.classList.toggle('nav_open'); //メニュークリックでnav-openというクラスがbodyに付与
20
+ });
21
+ blackBg.addEventListener('click', function() {
22
+ body.classList.remove('nav_open'); //もう一度クリックで解除
23
+ });
3
- $('a').on('click', function(){
24
+ $('a').on('click', function(){
4
- body.classList.remove('nav_open');
25
+ body.classList.remove('nav_open');
5
- });
26
+ });
27
+ }
28
+ toggleNav();
29
+
6
30
  ```
7
31
  こんな感じかな?

1

追記

2020/02/25 03:32

投稿

kyoya0819
kyoya0819

スコア10434

answer CHANGED
@@ -2,6 +2,6 @@
2
2
  ```jQuery
3
3
  $('a').on('click', function(){
4
4
  body.classList.remove('nav_open');
5
- }
5
+ });
6
6
  ```
7
7
  こんな感じかな?