アコーディオンメニューがすぐ閉じてしまう

ＰＣのときはマウスオーバーでサブメニューが開いて、スマホのときはタップで開きどこかタップすると閉じるようにしたいです。

現状は、タップするとサブメニューが開きますが、すぐ閉じてしまうんです。

JQUERY

$(function () {
    var ua = navigator.userAgent;
    if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) {
        jQuery('ul#menu li ul').hide();
        jQuery(function () {
            $("li#profile-btn").on('click touchstart', function () {
                var windowWidth = window.innerWidth;
                if (windowWidth <= 1000) {
                    $("li#profile-btn ul").slideToggle(300);
                }
            });
        });

        jQuery(function () {
            $("li#policy-btn").on('click touchend', function () {
                var windowWidth = window.innerWidth;
                if (windowWidth <= 1000) {
                    $("li#policy-btn ul").slideToggle(300)
                }
            });
        });

        jQuery(function () {
            $("main").on('click touchstart', function () {
                $("ul#menu ul").slideUp(300);
            });
        });
    } else {

        jQuery(function () {
            $("li#profile-btn").on('mouseenter mouseleave', function () {
                $("li#profile-btn ul").slideToggle(300);
            });
        });
        jQuery(function () {
            $("li#policy-btn").on('mouseenter mouseleave', function () {
                $("li#policy-btn ul").slideToggle(300);
            });
        });
    }
});

CSS

ul#menu {
	display: flex;
	justify-content: space-between;
	width: 32vw;
	margin-top: 0.8vw;
}
ul#menu li a {
	font-size: 1.2vw;
	font-weight: bold;
	color: #fff;
}
ul#menu li a:hover {
	border-bottom: 1px solid #fff;
}
ul#menu li div {
	flex-direction: column;
	width: auto;
	position: absolute;
	display: none;
	background-color: #f1faff;
}
ul#menu li li {
	background-color: #f1faff;
	border-bottom: 1px solid #000;
	line-height: 2vw;
	font-size: 100%;
	position: relative;
}
ul#menu li li:last-child {
	border: none;
}
ul#menu li li a {
	color: #8a90b7;
	background-image: url(none) !important;
	font-weight: bold;
	padding-left: 2%;
	font-size: 0.9vw;
}
ul#menu li li a:hover {
	background-color: #19ACFF;
	color: #fff;
	background-image: url(none) !important;
	text-decoration: none;
}
ul#menu li#home-btn {
	width: 3.8vw;
}
ul#menu li#profile-btn, li#policy-btn {
	width: 6.7vw;
}
ul#menu li#profile-btn a, li#policy-btn a, li#profile-btn a:hover, li#policy-btn a:hover {
	background-image: url("/wp-content/themes/kazama/image/common/submenu.svg");
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 0.6vw auto;
}
ul#menu li#suppot-btn, li#contact-btn {
	width: 5vw;
}
ul#menu li div li a, ul#menu li div li a:hover {
	background-image: url(none) !important;
}
ul#menu li#profile-btn ul {
	width: 7vw;
}
ul#menu li#policy-btn ul {
	width: 14vw;
}

HTML

                <ul id="menu">
                    <li id="home-btn"><a href="/"><span>ホーム</span></a>
                    </li>
                    <li id="profile-btn"><a href="#">人物<span>を知る</span></a>
                        <div>
                            <ul>
                                <li><a href="/profile/">プロフィール</a>
                                </li>

                                <li><a href="/profile/media/">メディア掲載</a>
                                </li>


                                <li><a href="/profile/lifework/">ライフワーク</a>
                                </li>

                                <li><a href="/profile/works/">区議のお仕事</a>
                                </li>

                            </ul>
                        </div>
                    </li>
                    <li id="policy-btn"><a href="#">政策<span>を知る</span></a>
                        <div id="sub2">
                            <ul>
                                <li><a href="/policy/">政策を知る一覧</a>
                                </li>

                                <li><a href="/policy/no1/">僕が、議員になった理由</a>
                                </li>

                                <li><a href="/policy/no2/">政策について、お話する前に</a>
                                </li>

                                <li><a href="/policy/no3/">政策2007年-2018</a>
                                </li>

                                <li><a href="/policy/no4/">政策2019</a>
                                </li>

                                <li><a href="/policy/no5/">「古い政策」を、変えるために</a>
                                </li>
                            </ul>

                        </div>

                    </li>
                    <li id="supprt-btn"><a href="/supporter/">応援<span>する</span></a>
                    </li>
                    <li id="contact-btn"><a href="/contact/">連絡<span>する</span></a> </ul>

お手数ですが、よろしくお願いいたします。

m.ts10806

2019/02/23 01:41

コードはマークダウンのcode機能を利用してご提示ください。また、JavaScriptコードだけでは再現ができませんので、html、cssなど完全に再現できる状態でコードをご提示ください。

TakaakiKato

2019/02/25 00:44

ご連絡ありがとうございます。 html、cssも追加しましたので、ご確認よろしくお願いします。

Lhankor_Mhy

2019/02/26 08:51

補足願います。この『$("main")』はどの要素を指しますか？

m.ts10806

2019/02/26 10:15

どんどんおかしくなるし何も説明なくお願いしたコード以外が追加される… デバッグから一歩一歩辿った回答追記しようと思ったけどやめようかな。さすがにこんなことされちゃ面倒見切れない

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

回答1件

ベストアンサー

手元に試せる環境が無いのであくまで理論上ですが、
touchstartとclickが同時に（正確にはちょっとずれて連続で）発生していることが原因ではないかと思われます。

JSでtouchstartとclickイベントを2回発生させないようにしつつ同時に指定する対応を入れてみてください。

投稿2019/02/25 02:30

m.ts10806

総合スコア80888

TakaakiKato

2019/02/25 05:04

クリックしたら止まるようになりましたが、もう一つのサブメニューが出ないです。どうしたら良いですか？

m.ts10806

2019/02/25 05:06

いま、コードどうなってますか？質問本文更新してください。また「もう一つのサブメニュー」と言われましても作った人にしか該当するものが何か分かりませんので、丁寧に表現してください

TakaakiKato

2019/02/25 05:22

コードを更新しました。やはり、スマホで検証してみると、サブメニューがすぐ消えてしまいます。「人物ー」の隣の「政策－」のサブメニューが表示されないです。また、画面全体をクリックしても閉じません。

TakaakiKato

2019/02/25 05:24

ＵＲＬを書く方が良いですか？

m.ts10806

2019/02/25 05:37

$('ul#menu li').on('touchstart click', function (event) { の中に全部入り込んでしまっているようですが、これは大丈夫ですか？

TakaakiKato

2019/02/25 05:53

コードを更新しましたが、１６行目あたりにエラーがあるようですが、何かわかりますか？

m.ts10806

2019/02/25 05:57

また、大幅に変わったようですね・・・。元の挙動は大丈夫でしょうか・・。エラーとはJavaScriptの方でしょうか？私のほうではコンソールにエラーなど出ていませんが、どうなっているのでしょうか？

TakaakiKato

2019/02/25 06:06

エラーの原因はわかりましたが、まだサブメニュが一カ所しか出ませんし、同じ要素をクリックしたらサブメニューが閉じますが、どこかクリックしても閉じません。

m.ts10806

2019/02/25 06:10

touchstart clickのイベントを拾っている箇所は1箇所だけじゃないですね。イベントは個々に発生しているので個々に対応入れてください。今のところ見た感じでは1箇所しか入れられていないようですし、1つできているのであれば、質問者さんの反映漏れだと思います。

TakaakiKato

2019/02/25 06:22

申し訳ありませんがどういうことでしょうか？イベントは３つありますが。

TakaakiKato

2019/02/25 06:28

やはり、タップするとサブメニューがすぐ閉じてしまいます。

m.ts10806

2019/02/25 06:30

私が提示した記事は

m.ts10806

2019/02/25 06:32

event.preventDefault(); ↑を利用して止める　という意味ですよね。３箇所にイベントがあってなぜ特定の1箇所にしかその1行を入れてないんですか？ついでに下記、イベント内に同じイベントがありますよ。 $('li#policy-btn').on('touchstart click', function (event) { $("li#policy-btn").on('click touchstart', function () { $(this).siblings().find("ul").hide(); // 兄弟要素に含まれるサブメニューを全部消す。 $(this).children().slideDown(150); // 自分のサブメニューを表示する。 }); });

TakaakiKato

2019/02/25 06:41

event.preventDefault();を３ヵ所に入れましたが全然変わりません。

m.ts10806

2019/02/25 06:48

windowのresizeイベントの中に入れているからでは？これだと「windowサイズが変わったとき同時にクリックイベントが起きたらみたいな意味合いになって、イベントの発生が限定されすぎてしまいます。文章がつながっていません。「ソースコードはしゃべるように書け」という記事があります。 https://qiita.com/chooyan_eng/items/72f86a2ce2ca67d3b4a4 しゃべっていて意味が通じない順番だったりイベントにイベントを重ねてプログラムが道筋を辿れないような作りにしてしまってはいけません。ですから「また、大幅に変わったようですね・・・。元の挙動は大丈夫でしょうか・・。」と心配していたのですが。自身で勝手に元のものから変えたのですから自身で責任を持ちましょうよ。質問の場であってデバッグ依頼の場ではありませんよ。コードは書いた通りにしか動かないのですから、何があっても組んだご自身が悪いです。

TakaakiKato

2019/02/25 07:09

色々アドバイスありがとうございます。 resizeイベントの中を消しましたが、何も変わりませんでした！

m.ts10806

2019/02/25 07:17

>resizeイベントの中を消しました中、ですか。コードと文言があってないのでどちらを信じたらいいのやら。

m.ts10806

2019/02/25 07:21 編集

htmlに対するイベント（$('html').on('click touchstart', function (event) { の部分）は配下にも全て影響があるのでイベント重複は間違いなさそうですね。押したけど、即座に別のclickイベントが反応して一瞬で元に戻る、とか起きてそうです。 userAgentの分岐取っ払ってPC側できちんと動作するか確かめた方が良いですよ。

m.ts10806

2019/02/25 07:21

少しだけ分かりやすく表現をかえて繰り返しますね。↓ 文章として””成り立っていません””。「ソースコードはしゃべるように書け」という記事があります。 https://qiita.com/chooyan_eng/items/72f86a2ce2ca67d3b4a4 しゃべっていて意味が通じない順番だったりイベントにイベントを重ねてプログラムが道筋を辿れないような作りにしてしまってはいけません。

Lhankor_Mhy

2019/02/25 07:36

イベントの伝播のキャンセルなら、 event.stopPropagation(); の方ですかね？

m.ts10806

2019/02/25 07:42

return falseでも良さそうですね。 https://www.tam-tam.co.jp/tipsnote/javascript/post5050.html ただ、htmlに対してイベントとろうとしてるところでおかしくなってるのは間違いなさそうですが…

TakaakiKato

2019/02/26 07:45

PCだとトグルは上手く行くんですが、スマホだとなぜか開閉を繰り返してしまいます。どうしたら良いですか？

m.ts10806

2019/02/26 07:49

>PCだとトグルは上手く行くそれは、どのコードでしょうか。今のコードでしょうか、それとも「 userAgentの分岐取っ払った、現在のPC側としている記述をなくしたコード」でしょうか。あと私の2019/02/25 16:20のコメントは理解されてますか？

m.ts10806

2019/02/26 07:55

ちなみにすぐ閉じるのは2019/02/25 16:20に書いた指摘の通り。私のほうで「userAgentの分岐取っ払った、現在のPC側としている記述をなくしたコード」でPC Chromeで勝手に閉じない動作確認できています。意味が理解できていれば問題なく対応できているはずですが、理解度については教えてもらえず「どうしたらいいですか？」だけなので、こちらも困っています。

m.ts10806

2019/02/26 07:57

ついでの指摘ですが、下記のような書き方、CSS文法チェック的にはエラーが出ませんが、 background: url(none); サーバー的にはエラーになるのでかえたほうが良いです。 https://dacelo.space/css/entry-665.html

TakaakiKato

2019/02/26 08:03

ありがとうございます。

m.ts10806

2019/02/26 08:04

2019/02/26 16:49から3つコメントしているので全て読んでくださいね。そこまで対応できればあとは「特定要素以外のイベント発火」を捉えるだけです。例： https://qiita.com/rukurx/items/1e504e2dacb41e2668f2

m.ts10806

2019/02/26 08:05

いやだから、なんかいつの間にか処理追加されてるし、こちらに貼られても困るし（マークダウン使えないから）もっとミニマムコードで1個1個部品の動作確認してから入れましょうよ。ゴチャゴチャになって手がつけられなくなるだけですよ。

TakaakiKato

2019/02/26 08:08

ごめんなさい

m.ts10806

2019/02/26 08:09

いえ、謝る必要は無いので、あくまできちんと対応してください。ただ、回答者はあなたの傍に片時も離れずついているわけでもないし、画面を一緒に見ながら操作しているわけでもない　そこは意識していただきたく。

TakaakiKato

2019/02/26 08:25

「特定要素以外のイベント発火」のコードをどこに入れるのでしょうか？

m.ts10806

2019/02/26 08:33

どこにいれるかは置いて、ミニマムコードでまず「できるかどうか」を試してください。いきなり最終の答えだけを求めないようにしてください。それだと質問ではなく作業依頼になります。 2019/02/26 16:55でもコメントしていますが、どのように理解したとかどれくらい理解したとか何も無く毎回「どうしたらいい？」だけなので、困っています。それにご自身でそれに近いコードを入れているのを気づかれてませんか？自身のコードをきちんと把握するところから初めてください。

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