teratail
回答率
85.31%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問アコーディオンメニューがすぐ閉じてしまう

編集履歴

質問編集履歴

8

コードの更新

2019/02/26 08:28

投稿

TakaakiKato
TakaakiKato

スコア23

test CHANGED
File without changes
test CHANGED
@@ -14,61 +14,75 @@
14
14
 
15
15
  var ua = navigator.userAgent;
16
16
 
17
- if (ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) {
17
+ if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) {
18
-
18
+
19
- // var $winWidth = $(window).width();
19
+ jQuery('ul#menu li ul').hide();
20
-
20
+
21
- // $(window).on('resize', function () {
21
+ jQuery(function () {
22
-
23
- // var $winWidthResize = $(window).width();
22
+
24
-
25
- // if ($winWidth !== $winWidthResize) {
26
-
27
- $('li#profile-btn').on('touchstart click', function (event) {
23
+ $("li#profile-btn").on('click touchstart', function () {
24
+
28
-
25
+ var windowWidth = window.innerWidth;
26
+
29
- event.preventDefault();
27
+ if (windowWidth <= 1000) {
30
-
28
+
31
- $(this).siblings().find("ul").hide();
29
+ $("li#profile-btn ul").slideToggle(300);
32
-
30
+
33
- $(this).children().slideDown(150);
31
+ }
34
-
32
+
35
- });
33
+ });
36
-
37
- $('li#policy-btn').on('touchstart click', function (event) {
34
+
38
-
39
- event.preventDefault();
40
-
41
- $(this).siblings().find("ul").hide();
42
-
43
- $(this).children().slideDown(150);
44
-
45
- });
35
+ });
36
+
37
+
38
+
46
-
39
+ jQuery(function () {
47
-
48
-
40
+
49
- $('html').on('click touchstart', function (event) {
41
+ $("li#policy-btn").on('click touchend', function () {
42
+
50
-
43
+ var windowWidth = window.innerWidth;
44
+
51
- event.preventDefault();
45
+ if (windowWidth <= 1000) {
52
-
53
- if (!$(event.target).closest('ul#menu li ul').length) {
46
+
54
-
55
- $('ul#menu li ul').slideUp(150);
47
+ $("li#policy-btn ul").slideToggle(300)
56
-
48
+
57
- }
49
+ }
50
+
58
-
51
+ });
52
+
59
-
53
+ });
54
+
55
+
56
+
57
+ jQuery(function () {
58
+
59
+ $("main").on('click touchstart', function () {
60
+
61
+ $("ul#menu ul").slideUp(300);
62
+
63
+ });
60
64
 
61
65
  });
62
66
 
63
67
  } else {
64
68
 
69
+
70
+
65
- $(function () {
71
+ jQuery(function () {
72
+
66
-
73
+ $("li#profile-btn").on('mouseenter mouseleave', function () {
74
+
67
- $("ul#menu li").hover(function () {
75
+ $("li#profile-btn ul").slideToggle(300);
76
+
68
-
77
+ });
78
+
79
+ });
80
+
81
+ jQuery(function () {
82
+
69
- $(this).siblings().find("ul").hide();
83
+ $("li#policy-btn").on('mouseenter mouseleave', function () {
70
-
84
+
71
- $(this).children().slideDown(150);
85
+ $("li#policy-btn ul").slideToggle(300);
72
86
 
73
87
  });
74
88
 

7

コードの更新

2019/02/26 08:28

投稿

TakaakiKato
TakaakiKato

スコア23

test CHANGED
File without changes
test CHANGED
@@ -16,70 +16,64 @@
16
16
 
17
17
  if (ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) {
18
18
 
19
- var $winWidth = $(window).width();
19
+ // var $winWidth = $(window).width();
20
-
20
+
21
- $(window).on('resize', function () {
21
+ // $(window).on('resize', function () {
22
-
22
+
23
- var $winWidthResize = $(window).width();
23
+ // var $winWidthResize = $(window).width();
24
-
24
+
25
- if ($winWidth !== $winWidthResize) {
25
+ // if ($winWidth !== $winWidthResize) {
26
-
26
+
27
- $('li#profile-btn').on('touchstart click', function (event) {
27
+ $('li#profile-btn').on('touchstart click', function (event) {
28
-
28
+
29
- event.preventDefault();
29
+ event.preventDefault();
30
-
30
+
31
- $(this).siblings().find("ul").hide();
31
+ $(this).siblings().find("ul").hide();
32
-
32
+
33
- $(this).children().slideDown(150);
33
+ $(this).children().slideDown(150);
34
-
34
+
35
- });
35
+ });
36
-
36
+
37
- $('li#policy-btn').on('touchstart click', function (event) {
37
+ $('li#policy-btn').on('touchstart click', function (event) {
38
-
38
+
39
- event.preventDefault();
39
+ event.preventDefault();
40
-
41
- $("li#policy-btn").on('click touchstart', function () {
40
+
42
-
43
- $(this).siblings().find("ul").hide();
41
+ $(this).siblings().find("ul").hide();
44
-
42
+
45
- $(this).children().slideDown(150);
43
+ $(this).children().slideDown(150);
46
-
44
+
47
- });
45
+ });
48
-
49
-
50
-
51
- });
46
+
52
-
47
+
48
+
53
- $('html').on('click touchstart', function (event) {
49
+ $('html').on('click touchstart', function (event) {
54
-
50
+
55
- event.preventDefault();
51
+ event.preventDefault();
56
-
52
+
57
- if (!$(event.target).closest('ul#menu li ul').length) {
53
+ if (!$(event.target).closest('ul#menu li ul').length) {
58
-
54
+
59
- $('ul#menu li ul').slideUp(150);
55
+ $('ul#menu li ul').slideUp(150);
60
-
61
- }
62
-
63
- });
64
-
65
- } else {
66
-
67
- $(function () {
68
-
69
- $("ul#menu li").hover(function () {
70
-
71
- $(this).siblings().find("ul").hide();
72
-
73
- $(this).children().slideDown(150);
74
-
75
- });
76
-
77
- });
78
56
 
79
57
  }
80
58
 
59
+
60
+
81
61
  });
82
62
 
63
+ } else {
64
+
65
+ $(function () {
66
+
67
+ $("ul#menu li").hover(function () {
68
+
69
+ $(this).siblings().find("ul").hide();
70
+
71
+ $(this).children().slideDown(150);
72
+
73
+ });
74
+
75
+ });
76
+
83
77
  }
84
78
 
85
79
  });

6

コードの更新

2019/02/25 07:06

投稿

TakaakiKato
TakaakiKato

スコア23

test CHANGED
File without changes
test CHANGED
@@ -26,62 +26,56 @@
26
26
 
27
27
  $('li#profile-btn').on('touchstart click', function (event) {
28
28
 
29
- // touchstar以降のイベントを発生させないように
30
-
31
29
  event.preventDefault();
32
30
 
31
+ $(this).siblings().find("ul").hide();
32
+
33
+ $(this).children().slideDown(150);
34
+
35
+ });
36
+
37
+ $('li#policy-btn').on('touchstart click', function (event) {
38
+
39
+ event.preventDefault();
40
+
33
- $("li#profile-btn").on('click touchstart', function () {
41
+ $("li#policy-btn").on('click touchstart', function () {
34
-
42
+
35
- $(this).siblings().find("ul").hide(); // 兄弟要素に含まれるサブメニューを全部消す。
43
+ $(this).siblings().find("ul").hide();
36
-
44
+
37
- $(this).children().slideDown(150); // 自分のサブメニューを表示する。
45
+ $(this).children().slideDown(150);
38
46
 
39
47
  });
40
48
 
49
+
50
+
41
51
  });
42
52
 
43
- $('li#policy-btn').on('touchstart click', function (event) {
53
+ $('html').on('click touchstart', function (event) {
54
+
44
-
55
+ event.preventDefault();
56
+
45
-
57
+ if (!$(event.target).closest('ul#menu li ul').length) {
58
+
46
-
59
+ $('ul#menu li ul').slideUp(150);
60
+
61
+ }
62
+
63
+ });
64
+
65
+ } else {
66
+
67
+ $(function () {
68
+
47
- $("li#policy-btn").on('click touchstart', function () {
69
+ $("ul#menu li").hover(function () {
48
-
70
+
49
- $(this).siblings().find("ul").hide(); // 兄弟要素に含まれるサブメニューを全部消す。
71
+ $(this).siblings().find("ul").hide();
50
-
72
+
51
- $(this).children().slideDown(150); // 自分のサブメニューを表示する。
73
+ $(this).children().slideDown(150);
52
74
 
53
75
  });
54
76
 
55
-
56
-
57
77
  });
58
78
 
59
- $('html').on('click touchstart', function (event) {
60
-
61
- if (!$(event.target).closest('ul#menu li ul').length) {
62
-
63
- $('ul#menu li ul').slideUp(150);
64
-
65
- }
66
-
67
- });
68
-
69
- } else {
70
-
71
- $(function () {
72
-
73
- // ▼マウスが載ったらサブメニューを表示
74
-
75
- $("ul#menu li").hover(function () {
76
-
77
- $(this).siblings().find("ul").hide(); // 兄弟要素に含まれるサブメニューを全部消す。
78
-
79
- $(this).children().slideDown(150); // 自分のサブメニューを表示する。
80
-
81
- });
82
-
83
- });
84
-
85
79
  }
86
80
 
87
81
  });

5

コードの更新

2019/02/25 06:40

投稿

TakaakiKato
TakaakiKato

スコア23

test CHANGED
File without changes
test CHANGED
@@ -16,62 +16,84 @@
16
16
 
17
17
  if (ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) {
18
18
 
19
+ var $winWidth = $(window).width();
20
+
21
+ $(window).on('resize', function () {
22
+
23
+ var $winWidthResize = $(window).width();
24
+
25
+ if ($winWidth !== $winWidthResize) {
26
+
19
- $('ul#menu li').on('touchstart click', function (event) {
27
+ $('li#profile-btn').on('touchstart click', function (event) {
20
-
28
+
21
- // touchstar以降のイベントを発生させないように
29
+ // touchstar以降のイベントを発生させないように
22
-
30
+
23
- event.preventDefault();
31
+ event.preventDefault();
24
-
32
+
25
- $("li#profile-btn").on('click touchstart', function () {
33
+ $("li#profile-btn").on('click touchstart', function () {
26
-
34
+
27
- $(this).siblings().find("ul").hide(); // 兄弟要素に含まれるサブメニューを全部消す。
35
+ $(this).siblings().find("ul").hide(); // 兄弟要素に含まれるサブメニューを全部消す。
28
-
36
+
29
- $(this).children().slideDown(150); // 自分のサブメニューを表示する。
37
+ $(this).children().slideDown(150); // 自分のサブメニューを表示する。
30
-
38
+
31
- });
39
+ });
40
+
32
-
41
+ });
42
+
43
+ $('li#policy-btn').on('touchstart click', function (event) {
44
+
45
+
46
+
33
- $("li#policy-btn").on('click touchstart', function () {
47
+ $("li#policy-btn").on('click touchstart', function () {
34
-
48
+
35
- $(this).siblings().find("ul").hide(); // 兄弟要素に含まれるサブメニューを全部消す。
49
+ $(this).siblings().find("ul").hide(); // 兄弟要素に含まれるサブメニューを全部消す。
36
-
50
+
37
- $(this).children().slideDown(150); // 自分のサブメニューを表示する。
51
+ $(this).children().slideDown(150); // 自分のサブメニューを表示する。
38
-
52
+
39
- });
53
+ });
54
+
55
+
56
+
40
-
57
+ });
58
+
41
- $('html').on('click touchstart', function (event) {
59
+ $('html').on('click touchstart', function (event) {
42
-
60
+
43
- if (!$(event.target).closest('ul#menu li ul').length) {
61
+ if (!$(event.target).closest('ul#menu li ul').length) {
44
-
62
+
45
- $('ul#menu li ul').slideUp(150);
63
+ $('ul#menu li ul').slideUp(150);
46
-
64
+
47
- }
65
+ }
48
-
66
+
49
- });
67
+ });
68
+
69
+ } else {
70
+
71
+ $(function () {
72
+
73
+ // ▼マウスが載ったらサブメニューを表示
74
+
75
+ $("ul#menu li").hover(function () {
76
+
77
+ $(this).siblings().find("ul").hide(); // 兄弟要素に含まれるサブメニューを全部消す。
78
+
79
+ $(this).children().slideDown(150); // 自分のサブメニューを表示する。
80
+
81
+ });
82
+
83
+ });
84
+
85
+ }
50
86
 
51
87
  });
52
88
 
53
- } else {
54
-
55
- $(function () {
56
-
57
- // ▼マウスが載ったらサブメニューを表示
58
-
59
- $("ul#menu li").hover(function () {
60
-
61
- $(this).siblings().find("ul").hide(); // 兄弟要素に含まれるサブメニューを全部消す。
62
-
63
- $(this).children().slideDown(150); // 自分のサブメニューを表示する。
64
-
65
- });
66
-
67
- });
68
-
69
89
  }
70
90
 
71
91
  });
72
92
 
73
93
 
74
94
 
95
+
96
+
75
97
  ```
76
98
 
77
99
  ### CSS

4

コードの更新

2019/02/25 05:51

投稿

TakaakiKato
TakaakiKato

スコア23

test CHANGED
File without changes
test CHANGED
@@ -8,44 +8,64 @@
8
8
 
9
9
  ### JQUERY
10
10
 
11
+ ```
12
+
11
- ```$(function () {
13
+ $(function () {
12
14
 
13
15
  var ua = navigator.userAgent;
14
16
 
15
17
  if (ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) {
16
18
 
19
+ $('ul#menu li').on('touchstart click', function (event) {
20
+
21
+ // touchstar以降のイベントを発生させないように
22
+
23
+ event.preventDefault();
24
+
25
+ $("li#profile-btn").on('click touchstart', function () {
26
+
27
+ $(this).siblings().find("ul").hide(); // 兄弟要素に含まれるサブメニューを全部消す。
28
+
29
+ $(this).children().slideDown(150); // 自分のサブメニューを表示する。
30
+
31
+ });
32
+
33
+ $("li#policy-btn").on('click touchstart', function () {
34
+
35
+ $(this).siblings().find("ul").hide(); // 兄弟要素に含まれるサブメニューを全部消す。
36
+
37
+ $(this).children().slideDown(150); // 自分のサブメニューを表示する。
38
+
39
+ });
40
+
41
+ $('html').on('click touchstart', function (event) {
42
+
43
+ if (!$(event.target).closest('ul#menu li ul').length) {
44
+
45
+ $('ul#menu li ul').slideUp(150);
46
+
47
+ }
48
+
49
+ });
50
+
51
+ });
52
+
53
+ } else {
54
+
17
55
  $(function () {
18
56
 
19
- $("li#profile-btn").on('click touchstart', function () {
57
+ // ▼マウスが載ったらサブメニューを表示
20
-
58
+
21
- $("li#profile-btn div").stop().slideToggle();
59
+ $("ul#menu li").hover(function () {
60
+
61
+ $(this).siblings().find("ul").hide(); // 兄弟要素に含まれるサブメニューを全部消す。
62
+
63
+ $(this).children().slideDown(150); // 自分のサブメニューを表示する。
22
64
 
23
65
  });
24
66
 
25
- $("html").on('click touchstart', function () {
26
-
27
- $("li#profile-btn div").slideDown();
28
-
29
- });
30
-
31
-
32
-
33
67
  });
34
68
 
35
- } else {
36
-
37
- $(function () {
38
-
39
- $("ul#menu li").hover(function () {
40
-
41
- $(this).siblings().find("div").hide();
42
-
43
- $(this).children().slideDown(150);
44
-
45
- });
46
-
47
- });
48
-
49
69
  }
50
70
 
51
71
  });

3

誤字

2019/02/25 05:14

投稿

TakaakiKato
TakaakiKato

スコア23

test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
 
8
8
 
9
- ### JQUARY
9
+ ### JQUERY
10
10
 
11
11
  ```$(function () {
12
12
 

2

見出しの追加

2019/02/25 00:53

投稿

TakaakiKato
TakaakiKato

スコア23

test CHANGED
File without changes
test CHANGED
@@ -6,6 +6,8 @@
6
6
 
7
7
 
8
8
 
9
+ ### JQUARY
10
+
9
11
  ```$(function () {
10
12
 
11
13
  var ua = navigator.userAgent;
@@ -52,6 +54,8 @@
52
54
 
53
55
  ```
54
56
 
57
+ ### CSS
58
+
55
59
  ```
56
60
 
57
61
  ul#menu {
@@ -192,6 +196,8 @@
192
196
 
193
197
  ```
194
198
 
199
+ ### HTML
200
+
195
201
  ```
196
202
 
197
203
  <ul id="menu">

1

書式の改善

2019/02/25 00:51

投稿

TakaakiKato
TakaakiKato

スコア23

test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
 
8
8
 
9
- $(function () {
9
+ ```$(function () {
10
10
 
11
11
  var ua = navigator.userAgent;
12
12
 
@@ -20,7 +20,7 @@
20
20
 
21
21
  });
22
22
 
23
- $(".close").on('click touchstart', function () {
23
+ $("html").on('click touchstart', function () {
24
24
 
25
25
  $("li#profile-btn div").slideDown();
26
26
 
@@ -50,8 +50,254 @@
50
50
 
51
51
 
52
52
 
53
+ ```
54
+
55
+ ```
56
+
57
+ ul#menu {
58
+
59
+ display: flex;
60
+
61
+ justify-content: space-between;
62
+
63
+ width: 32vw;
64
+
65
+ margin-top: 0.8vw;
66
+
67
+ }
68
+
69
+ ul#menu li a {
70
+
71
+ font-size: 1.2vw;
72
+
73
+ font-weight: bold;
74
+
75
+ color: #fff;
76
+
77
+ }
78
+
79
+ ul#menu li a:hover {
80
+
81
+ border-bottom: 1px solid #fff;
82
+
83
+ }
84
+
85
+ ul#menu li div {
86
+
87
+ flex-direction: column;
88
+
89
+ width: auto;
90
+
91
+ position: absolute;
92
+
93
+ display: none;
94
+
95
+ background-color: #f1faff;
96
+
97
+ }
98
+
99
+ ul#menu li li {
100
+
101
+ background-color: #f1faff;
102
+
103
+ border-bottom: 1px solid #000;
104
+
105
+ line-height: 2vw;
106
+
107
+ font-size: 100%;
108
+
109
+ position: relative;
110
+
111
+ }
112
+
113
+ ul#menu li li:last-child {
114
+
115
+ border: none;
116
+
117
+ }
118
+
119
+ ul#menu li li a {
120
+
121
+ color: #8a90b7;
122
+
123
+ background-image: url(none) !important;
124
+
125
+ font-weight: bold;
126
+
127
+ padding-left: 2%;
128
+
129
+ font-size: 0.9vw;
130
+
131
+ }
132
+
133
+ ul#menu li li a:hover {
134
+
135
+ background-color: #19ACFF;
136
+
137
+ color: #fff;
138
+
139
+ background-image: url(none) !important;
140
+
141
+ text-decoration: none;
142
+
143
+ }
144
+
145
+ ul#menu li#home-btn {
146
+
147
+ width: 3.8vw;
148
+
149
+ }
150
+
151
+ ul#menu li#profile-btn, li#policy-btn {
152
+
153
+ width: 6.7vw;
154
+
155
+ }
156
+
157
+ ul#menu li#profile-btn a, li#policy-btn a, li#profile-btn a:hover, li#policy-btn a:hover {
158
+
159
+ background-image: url("/wp-content/themes/kazama/image/common/submenu.svg");
160
+
161
+ background-position: right center;
162
+
163
+ background-repeat: no-repeat;
164
+
165
+ background-size: 0.6vw auto;
166
+
167
+ }
168
+
169
+ ul#menu li#suppot-btn, li#contact-btn {
170
+
171
+ width: 5vw;
172
+
173
+ }
174
+
53
- 今は確認画面閉じるボタンがありますが、本当は画面全体をクリックしたら閉じるようにしたいので、それについても教えて下さい。
175
+ ul#menu li div li a, ul#menu li div li a:hover {
176
+
54
-
177
+ background-image: url(none) !important;
178
+
55
-
179
+ }
180
+
56
-
181
+ ul#menu li#profile-btn ul {
182
+
183
+ width: 7vw;
184
+
185
+ }
186
+
187
+ ul#menu li#policy-btn ul {
188
+
189
+ width: 14vw;
190
+
191
+ }
192
+
193
+ ```
194
+
195
+ ```
196
+
197
+ <ul id="menu">
198
+
199
+ <li id="home-btn"><a href="/"><span>ホーム</span></a>
200
+
201
+ </li>
202
+
203
+ <li id="profile-btn"><a href="#">人物<span>を知る</span></a>
204
+
205
+ <div>
206
+
207
+ <ul>
208
+
209
+ <li><a href="/profile/">プロフィール</a>
210
+
211
+ </li>
212
+
213
+
214
+
215
+ <li><a href="/profile/media/">メディア掲載</a>
216
+
217
+ </li>
218
+
219
+
220
+
221
+
222
+
223
+ <li><a href="/profile/lifework/">ライフワーク</a>
224
+
225
+ </li>
226
+
227
+
228
+
229
+ <li><a href="/profile/works/">区議のお仕事</a>
230
+
231
+ </li>
232
+
233
+
234
+
235
+ </ul>
236
+
237
+ </div>
238
+
239
+ </li>
240
+
241
+ <li id="policy-btn"><a href="#">政策<span>を知る</span></a>
242
+
243
+ <div id="sub2">
244
+
245
+ <ul>
246
+
247
+ <li><a href="/policy/">政策を知る一覧</a>
248
+
249
+ </li>
250
+
251
+
252
+
253
+ <li><a href="/policy/no1/">僕が、議員になった理由</a>
254
+
255
+ </li>
256
+
257
+
258
+
259
+ <li><a href="/policy/no2/">政策について、お話する前に</a>
260
+
261
+ </li>
262
+
263
+
264
+
265
+ <li><a href="/policy/no3/">政策2007年-2018</a>
266
+
267
+ </li>
268
+
269
+
270
+
271
+ <li><a href="/policy/no4/">政策2019</a>
272
+
273
+ </li>
274
+
275
+
276
+
277
+ <li><a href="/policy/no5/">「古い政策」を、変えるために</a>
278
+
279
+ </li>
280
+
281
+ </ul>
282
+
283
+
284
+
285
+ </div>
286
+
287
+
288
+
289
+ </li>
290
+
291
+ <li id="supprt-btn"><a href="/supporter/">応援<span>する</span></a>
292
+
293
+ </li>
294
+
295
+ <li id="contact-btn"><a href="/contact/">連絡<span>する</span></a> </ul>
296
+
297
+ ```
298
+
299
+
300
+
301
+
302
+
57
- よろしくお願いします。
303
+ お手数ですが、よろしくお願いいたします。