こんばんは。 メガメニューを今実装しております。 クリックしたら開閉するようにしているのですが、クリ

こんばんは。
メガメニューを今実装しております。
クリックしたら開閉するようにしているのですが、クリックする要素以外を押したら閉じるようにしたいです。
しかし、、、うまくいきません。
開閉にはslidetoggleを使っています。
どなか、上記の、他の要素を触ったら閉じるような実装方法がありましたら、ご教授願います。

No.1 回答者： fujillin 回答日時： 2020/06/08 10:35

こんにちは

不明点が多いので、方法を文章で示す回答になってしまいますが・・・

「メガメニュー」ってわからないけれど、javascriptのカテでのご質問なので、LightBox系の発展型のものと解釈しました。
「メガメニュー」にどのようなAPIが用意されているのか（ないのか）わかりませんが、以下の内容がユーザに解放されているものと仮定しました。
　・表示中の（最上位）要素の識別子（または要素そのもの）の取得
　・表示中の要素を「閉じる」メソッド

＞クリックする要素以外を押したら閉じるようにしたいです。
＞他の要素を触ったら閉じるような実装方法がありましたら、
「押す」なのか「触る」なのか不明ですが、多分、clickやmouseover(=hover)でとれる操作と想像しました。
「表示中のものを閉じる」ことは（多分）できるものと思いますので、ご質問を解決するには、閉じるタイミングさえ取得・判断できれば良いものと推測しました。


いわゆるLightBoxのように、背景に半透明のバックを設けているタイプのものであるなら、その背景要素のclickやmouseoverを取得すればよいので簡単です。
背景等に上記のイベントを設定して、表示要素を閉じればよいでしょう。
もともとは背景が無い場合でも、「透明な背景」を追加することが可能であるなら、この方法を応用することで簡単に解決するものと想像します。

背景などが無い場合は、他の要素でイベントを取得する必要がでてくるかも知れませんが、マウスイベントの場合、大抵のものはバブリングしますので、（例えば）documentにイベントを設定しておくことで、イベントの発生をまとめて取得することができます。
ですので、この中から閉じるべきタイミングを選別できれば解決ということになると想像します。

◇mouseoverの場合
「表示中の要素以外のmouseoverを取得する」と考えても良いですが、逆に考えた方が簡単になると思われます。
（対象）表示要素のmouseleaveがこれと一致するはずですので、こちらを取得して無条件で閉じれば良いと考えられます。

◇clickの場合
clickの場合は、イベントが発生要素でしか捉えられないので、そちらから判断する必要が出てきます。
上述のようにdocumentで捉えれば全てのclickイベントを感知できますが、実際のイベント発生要素は event.target で取得できます。
これが、「表示中の要素の子孫要素であれば何もしない、それ以外であれば閉じる」というロジックで処理することでご質問の内容は実現可能と想像します。

表示中の要素の識別子がidなのかclassなのかはたまた要素そのものなのか不明ですが、仮にactiveElementとして識別できるものとします。
　let elm = event.target;
　while( elm && activeElement !== elm){ elm = elm.parentNode; }
のように遡りながらチェックすることで、イベント発生要素が表示要素内（=子孫）の要素かそれ以外かを判定できますので、上記の結果がnullなら（＝表示要素内ではないので）閉じればよいということになります。

表示中の要素は可変なので、比較対象は表示要素そのものでなくとも、その「メガメニュー」の包含要素（=固定）として判断してもよく、そちらの方が考え方は少しだけ簡単になるかも知れません。
もしもjQueryなどのライブラリを用いているのであれば、parents()メソッドで親要素をまとめて遡ることができますので、もう少し簡略な記述にできる可能性があります。

あるいは、「メガメニュー」のAPIにもっと便利な機能が用意されているようであれば、そちらを利用なさるのが良いでしょう。