質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
ドロップダウンメニュー

GUIを操作するユーザーインターフェイスで、リストボックスに似ており、ユーザーがリストから値を選べるようにするものです。ドロップダウンのリストが非アクティブの場合は、単体の値を表示します。アクティブ化されると、ユーザーが選択可能な値のリスト一覧を表示(ドロップダウン)します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

720閲覧

mouseleaveでメニューを非表示にしたい

YuusukeArtRoom

総合スコア23

ドロップダウンメニュー

GUIを操作するユーザーインターフェイスで、リストボックスに似ており、ユーザーがリストから値を選べるようにするものです。ドロップダウンのリストが非アクティブの場合は、単体の値を表示します。アクティブ化されると、ユーザーが選択可能な値のリスト一覧を表示(ドロップダウン)します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/08/27 18:54

undefined is not a function が出てきます。mouseoverでメニューを表示させるまではできました。初心者なので丁寧に教えていただけるとありがたいです。
よろしくお願いします。

javascript

1const parentMenu = document.querySelectorAll(".menu > li > a"); 2for (let i = 0; i< parentMenu.length; i++) { 3 parentMenu[i].addEventListener("mouseover", function(e) { 4 e.preventDefault(); 5 this.classList.toggle("active"); 6 this.nextElementSibling.classList.toggle("active"); 7 }) 8} 9 10document.getElementsByClassName('menu').addEventListener('mouseleave', function (e) { 11 e.preventDefault(); 12 var elem = document.getElementById('menu'); 13 elem.style.display = 'none'; 14 return false; 15})

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<title>Page Title</title> 5<meta charset="UTF-8"> 6<meta name="viewport" content="width=device-width, initial-scale=1"> 7 8<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> 9<link rel="stylesheet" href="style.css"> 10 11</head> 12<body> 13 <header> 14 <div class="header"> 15 <h1>My Website</h1> 16 <p>A website created by me.</p> 17 </div> 18 </header> 19 20 <main> 21 <ul class="menu"> 22 <li><a href="#a">カテゴリー</a> 23 <ul class="firstly"> 24 <li class="a"><a href="#a">カテゴリー1</a></li> 25 <li><a href="#a">カテゴリー2</a></li> 26 <li><a href="#a">カテゴリー3</a></li> 27 <li><a href="#a">カテゴリー4</a></li> 28 <li><a href="#a">カテゴリー5</a></li> 29 <li><a href="#a">カテゴリー6</a></li> 30 </ul> 31 </li> 32 </ul> 33 34 <ul class="menu"> 35 <li><a href="#a">メニュー1</a> 36 <ul class="firstly"> 37 <li class="a"><a href="#a">メニュー1</a></li> 38 <li><a href="#a">メニュー2</a></li> 39 <li><a href="#a">メニュー3</a></li> 40 <li><a href="#a">メニュー4</a></li> 41 <li><a href="#a">メニュー5</a></li> 42 <li><a href="#a">メニュー6</a></li> 43 </ul> 44 </li> 45 </ul> 46 47 48 <ul class="menu"> 49 <li><a href="#a">メニュー2</a> 50 <ul class="firstly"> 51 <li class="a"> 52 <li><a href="#a">メニュー1</a></li> 53 <li><a href="#a">メニュー2</a></li> 54 <li><a href="#a">メニュー3</a></li> 55 <li><a href="#a">メニュー4</a></li> 56 <li><a href="#a">メニュー5</a></li> 57 <li><a href="#a">メニュー6</a></li> 58 </ul> 59 </li> 60 </ul> 61 62 63 <ul class="menu"> 64 <li><a href="#a">メニュー3</a> 65 <ul class="firstly"> 66 <li class="a"> 67 <li><a href="#a">メニュー1</a></li> 68 <li><a href="#a">メニュー2</a></li> 69 <li><a href="#a">メニュー3</a></li> 70 <li><a href="#a">メニュー4</a></li> 71 <li><a href="#a">メニュー5</a></li> 72 <li><a href="#a">メニュー6</a></li> 73 </ul> 74 </li> 75 </ul> 76 77 78 <ul class="menu"> 79 <li><a href="#a">メニュー4</a> 80 <ul class="firstly"> 81 <li class="a"> 82 <li><a href="#a">メニュー1</a></li> 83 <li><a href="#a">メニュー2</a></li> 84 <li><a href="#a">メニュー3</a></li> 85 <li><a href="#a">メニュー4</a></li> 86 <li><a href="#a">メニュー5</a></li> 87 <li><a href="#a">メニュー6</a></li> 88 </ul> 89 </li> 90 </ul> 91 92 93 <ul class="menu"> 94 <li><a href="#a">メニュー5</a> 95 <ul class="firstly"> 96 <li class="a"> 97 <li><a href="#a">メニュー1</a></li> 98 <li><a href="#a">メニュー2</a></li> 99 <li><a href="#a">メニュー3</a></li> 100 <li><a href="#a">メニュー4</a></li> 101 <li><a href="#a">メニュー5</a></li> 102 <li><a href="#a">メニュー6</a></li> 103 </ul> 104 </li> 105 </ul> 106 107  </main> 108 109 <script src="script.js" defer></script> 110</body> 111</html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

エラー全文はおそらくこうなっているはずです(ブラウザによりかもしれませんが)

Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function

機能についてのエラーであればMDNなどのリファレンスを参照します。
初心者だからこそ余計にリファレンス・ドキュメントの参照を癖づけるべきです。

getElementsByClassName メソッドは、指定されたクラス名をすべて持つすべての子要素の配列風オブジェクトを返します。

getElementsByClassName() で配列風オブジェクトになります。これは1個しか存在しなくてもそうなります。
Elementsなので複数あります。

addEventListener() メソッドは、特定のイベントが対象に配信されるたびに呼び出される関数を設定します。 対象としてよくあるものは Element, Document, Window ですが、

ですので、配列風オブジェクトに対してaddEventListener()は使えないので、通常は、forループなどでgetElementsByClassName()で得られた配列風オブジェクトの1つ1つを取り出しaddEventします。

投稿2020/08/28 00:05

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問