スマホでアコーディオンメニューの開閉を示すアイコンがうまく機能しない

ハンバーガーメニューで下記の「drawer」を入れ、領域内スクロールがならないので、「myScroll」を入れました。
スマホではタップしても開かない（PCブラウザでは動作する）、下記のようなコードなのですが、どこを改善すればよいでしょうか？
どこがネックになっているかわからなかったのでjavascript得意な方見ていただけませんでしょうか？
「myScroll」が影響しているようです。

js
1
2<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
3<script type="text/javascript">
4
5$(document).ready(function() {
6$('.drawer').drawer();
7});
8
9
10$(function(){
11  $("#nav > ul > li > p.accordion_icon").removeClass('active');
12  $("#nav > ul > li > ul").hide();
13  $("#nav > ul > li").on("click",function(){
14    $(this).siblings("li").find('> ul').slideUp();
15    $(this).siblings("li").find('> p.accordion_icon').removeClass('active');
16    $(this).find('> ul').slideToggle(800);
17    $(this).find('> p.accordion_icon').toggleClass('active');
18  });
19});
20
21var myScroll;
22
23window.onload = function() {
24  myScroll = new IScroll('#nav', {
25    mouseWheel: true,
26    scrollbars: true,
27    fadeScrollbars: false, 
28    interactiveScrollbars: true, 
29    shrinkScrollbars: 'scale', 
30	
31  });
32};
33
34</script>

html
1<body class="drawer drawer--right">
2<div id="wrap">
3<header>
4<button type="button" class="drawer-toggle drawer-hamburger">
5<span class="sr-only">toggle navigation</span>
6<span class="drawer-hamburger-icon"></span>
7</button>
8<nav class="drawer-nav">
9<ul id="" class="drawer-menu">
10<li>
11<div id="side_menu">
12<div id="side_logo">
13<a href="/"><img src="img/common/logo.png" title="" alt=""></a>
14</div>
15<div id="nav">
16<ul id="menu">
17<li><a href="#"></a></li>
18<li><p class="menus"></p><p class="accordion_icon"><span></span><span></span></p>
19<ul class="child" >
20<li><a href="#"></a></li>
21<li><a href="#"></a></li>
22<li><a href="#"></a></li>
23</ul>
24</li>
25<li><a href="#"></a></li>
26<li><a href="#"></a></li>
27<li><a href="#"></a></li>
28<li><a href="#"></a></li>
29<li><a href="#"></a></li>
30<li><a href="#"></a></li>
31<li><a href="#"></a></li>
32</ul>
33
34</div>
35<div class="side_contact">
36<p><br>
37</p>
38<span class="side_tel"><a href="tel:"></a></span>
39<span class="side_contact_link"><a href="#"></a></span>
40</div>
41
42</div>
43</li>
44</ul>
45</nav>
46</header>

css
1nav{
2
3}
4
5div#side_menu {
6	width:  260px;
7	position: fixed;
8	top: 0;
9	left: 0;
10	z-index: 2;
11	background-color: #f8f8f8;
12	padding: 0px 0px 0px 0px;
13	-moz-box-sizing: border-box;
14	-webkit-box-sizing: border-box;
15	-o-box-sizing: border-box;
16	-ms-box-sizing: border-box;
17	box-sizing: border-box;
18}
19
20div#side_menu #side_logo {
21	margin: 30px 0px 50px 0px;
22	text-align: center;
23	background-color: #f8f8f8;
24}
25
26div#nav {
27	overflow-y: hidden;
28	overflow-x:  hidden;
29	width:  260px;
30	height: calc( 100vh - 315px );
31	position: relative;
32}
33
34
35div#side_menu ul {
36	margin: 0px 0px 0px 0px;
37
38}
39
40div#side_menu ul::-webkit-scrollbar{
41  width: 12px;
42}
43div#side_menu ul::-webkit-scrollbar-track{
44  background: #fff;
45  border: none;
46  border-radius: 10px;
47  box-shadow: inset 0 0 2px #777; 
48}
49div#side_menu ul::-webkit-scrollbar-thumb{
50  background: #aaa;
51  border-radius: 10px;
52  box-shadow: none;
53}
54
55ul#menu li{
56
57    background-color: #f8f8f8;
58	border-top:  solid 1px #e3e3e3;
59	border-bottom: solid 1px #e3e3e3;
60	
61}
62
63ul#menu li a{
64	color: #000000;
65	text-decoration: none;
66	display: block;
67	padding: 15px; 
68	
69}
70
71ul#menu li a:hover{
72	text-decoration: underline;
73	background: #e3e3e3;
74}
75
76ul#menu li a:before {
77	display: block;
78	content: "";
79	position: absolute;
80	-webkit-transform: rotate(45deg);
81	transform: rotate(45deg);
82	left: 235px;
83	width: 8px;
84	height: 8px;
85	margin-top: 4px;
86	background: #393939;
87}
88ul#menu li a:after {
89	display: block;
90	content: "";
91	position: absolute;
92	-webkit-transform: rotate(45deg);
93	transform: rotate(45deg);
94	left: 233px;
95	width: 8px;
96	height: 8px;
97	margin-top: -12px;
98	background: #f8f8f8;
99}
100
101ul#menu li a:hover:after {
102	background: #e3e3e3;
103}
104
105ul#menu li p.menus {
106	color: #000000;
107	text-decoration: none;
108	display: block;
109	padding: 15px; 
110	cursor: hand;
111	cursor: pointer;
112}
113
114ul#menu li p.menus:hover {
115	text-decoration: underline;
116	background: #e3e3e3;
117}
118
119ul#menu li p.menus:hover:after {
120	/*background: none*/
121}
122
123
124.accordion_icon,
125.accordion_icon span {
126    display: inline-block;
127    transition: all .4s;
128    box-sizing: border-box;
129}
130.accordion_icon {
131    position: relative;
132    width: 25px;
133    height: 25px;
134    float: right;
135    margin-right: 7px;
136    margin-top: -29px;
137}
138.accordion_icon span {
139    position: absolute;
140    left: 6px;
141    width: 50%;
142    height: 2px;
143    background-color: black;
144    border-radius: 4px;
145    -webkit-border-radius: 4px;
146    -ms-border-radius: 4px;
147    -moz-border-radius: 4px;
148    -o-border-radius: 4px;
149}
150.accordion_icon span:nth-of-type(1) {
151    top: 5px;
152    transform: rotate(0deg);
153    -webkit-transform: rotate(0deg);
154    -moz-transform: rotate(0deg);
155    -ms-transform: rotate(0deg);
156    -o-transform: rotate(0deg);
157}
158.accordion_icon span:nth-of-type(2) {
159    top: 5px;
160    transform: rotate(90deg);
161    -webkit-transform: rotate(90deg);
162    -moz-transform: rotate(90deg);
163    -ms-transform: rotate(90deg);
164    -o-transform: rotate(90deg);
165}
166
167.accordion_icon.active span:nth-of-type(1) {
168    display:none;
169}
170.accordion_icon.active span:nth-of-type(2) {
171    top: 5px;
172    transform: rotate(180deg);
173    -webkit-transform: rotate(180deg);
174    -moz-transform: rotate(180deg);
175    -ms-transform: rotate(180deg);
176    -o-transform: rotate(180deg);
177}
178
179
180ul#menu ul.child{
181    display: none;
182    padding: 0;
183    background: #e3e3e3;
184    width: 260px;
185    height: 100%;
186    -moz-box-sizing: border-box;
187    -webkit-box-sizing: border-box;
188    -o-box-sizing: border-box;
189    -ms-box-sizing: border-box;
190    box-sizing: border-box;
191    overflow-x:hidden;
192}
193
194ul#menu ul.child li{
195	border-top:  none;
196	border-bottom: none;
197	margin-left: 70px;
198	padding-left: -15px !important;
199	background: #e3e3e3;
200	color: #000000;
201	list-style-type: disc;
202}
203
204
205ul#menu ul.child li a{
206	background: #e3e3e3;
207	display: block;
208	text-decoration: none;
209	color: #000000;
210	-moz-box-sizing: border-box;
211	-webkit-box-sizing: border-box;
212	-o-box-sizing: border-box;
213	-ms-box-sizing: border-box;
214	box-sizing: border-box;
215}
216
217ul#menu ul.child li a:hover{
218	text-decoration: underline;
219}
220
221
222ul#menu ul.child li a:before {
223	display: none;
224}
225ul#menu ul.child li a:after {
226	display: none;
227}
228ul#menu ul.child li a:hover:after {
229	display: none
230}
231
232/*
233div#nav::-webkit-scrollbar{
234  width: 6px;
235}
236div#nav::-webkit-scrollbar-track{
237  background: #fff;
238  border: none;
239  border-radius: 10px;
240  box-shadow: inset 0 0 2px #777; 
241}
242div#nav::-webkit-scrollbar-thumb{
243  background: #aaa;
244  border-radius: 10px;
245  box-shadow: none;
246}*/
247
248div#side_menu .side_contact {
249	width: 260px;
250	height: 160px;
251	margin: 0px 0px 0px 0px;
252	padding: 0px 0px 0px 0px;
253	background: #665947;
254	text-align: center;
255	-moz-box-sizing: border-box;
256	-webkit-box-sizing: border-box;
257	-o-box-sizing: border-box;
258	-ms-box-sizing: border-box;
259	box-sizing: border-box;
260	position: absolute;
261	/* bottom: 0; */
262	/* position: fixed; */
263	/* bottom: 0; */
264	/* left: 0; */
265}
266
267div#side_menu .side_contact p {
268   padding: 15px 15px 10px 15px;
269   line-height: 150%;
270   color: #FFFFFF;
271   font-size: 80%;
272}
273
274div#side_menu .side_tel a {
275	color: #FFFFFF;
276	display: block;
277	text-decoration: none;
278	font-weight: bold;
279	font-size: 150%;
280	padding: 0px;
281}
282
283div#side_menu .side_tel a:hover {
284	color: #FFFFFF;
285}
286
287div#side_menu .side_contact_link a{
288	/*width: 230px;*/
289	margin: 15px 35px 0px 35px;
290	padding: 12px 0px 12px 0px;
291	color: #FFFFFF;
292	background: #afa186;
293	text-decoration: none;
294	display: block;
295	font-size: 80%;
296}

m.ts10806

2018/07/06 02:25

drawerクラスはHTML内のどこにもないようですが。。　>$('.drawer').drawer();

kitikiti

2018/07/06 03:03 編集

bodyに組んであります。修正を行いました。

m.ts10806

2018/07/06 04:45

そういうことですね。プラグインをお使いでしたらそのプラグインの公式ページURLを貼っておいてください。何もないと「自力で作ったもの」と認識されかねません。（”「drawer」を入れ”ではちょっと伝わりにくいかなと・・）

行動規範の内容に同意します

回答1件

ベストアンサー

「myScroll」が影響しているようです。

myScrollを入れずに操作した際は子要素が開きましたか？
もしmyScrollを入れなくても動作しない場合は、「＋」に仕掛けているイベントをclickイベントからtouchstartイベントに変更してみては如何でしょうか？
クリックイベントはマウスのイベントで、スクリーンのタッチ時のイベントとは別物です。
touchstartイベントはスクリーンタッチされた瞬間に発火するイベントとなりますので、スマホでタップした時に動作するはずです。逆に、マウスのクリックでは動作しなくなります。
マウスのクリック時にも同じ動きをさせたい場合は、clickイベントにも同じfunctionを仕掛けておくようにすれば動作します。

投稿2018/07/06 06:47

SE-studying-now

総合スコア351

kitikiti

2018/07/06 07:02 編集

myScrollを入れずに操作した場合は、機能します。 myScrollを入れるとPCブラウザでは全て動作確認済みで、スマホで確認するとプラス機能部分だけが機能しません。おそらく「myScroll」が画面タッチに反応し押されていても無視されていると思います。マウスイベントは反応するので、画面タッチの際が不具合になってるのかと。解決の糸口がおわかりでしたら、教えていただけると助かります。

SE-studying-now

2018/07/12 01:50 編集

お返事が遅くなりました。 https://teratail.com/questions/135633 によるとiPhoneで本事象が発生しているとのことですね。 iPhoneでIScrollのclickイベントが効かない、とのキーワードで検索したところ以下の質問サイトのやりとりを見つけました。 https://stackoverflow.com/questions/17768037/enable-click-events-in-iscroll-on-mobile-browser ご一読頂きたいと思いますが、かみ砕くとIScrollオブジェクト生成時にclick属性にtrueを設定すればよいとのこと。つまり、 myScroll = new IScroll('#nav', { mouseWheel: true, scrollbars: true, fadeScrollbars: false, interactiveScrollbars: true, shrinkScrollbars: 'scale', }); を、 myScroll = new IScroll('#nav', { mouseWheel: true, scrollbars: true, fadeScrollbars: false, interactiveScrollbars: true, shrinkScrollbars: 'scale', click: true }); とすれば動くかもです。（touch属性もtrueにすべきとの意見もありますので、touch属性もいるのかもしれません）当方、iPhoneの実行環境がありませんので未確認ですので、一度お試しください。

kitikiti

2018/07/12 02:37

ご返答ありがとうございます。上手に実装できそうです。まだ、全てを確認できていませんが、この度はありがとうございます。また、何か不明点がありましたらご協力をお願いすると思います。

SE-studying-now

2018/07/12 02:48

こちらこそ、お手伝いできてよかったです。以下の質問についても解決済みとしておいたほうがよいと思いますので、お時間ある時にお願いします。 https://teratail.com/questions/135633

行動規範の内容に同意します