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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

解決済

3回答

884閲覧

【JS】複数個所での関数利用について

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0グッド

2クリップ

投稿2018/03/05 13:16

編集2018/03/06 13:42

前提・実現したいこと

Javascriptでプルダウンメニューを作成しています。

 メニュー①をクリックすると、メニュー1~3
メニュー②をクリックすると、メニュー4~6

が表示されることを目的としています。

発生している問題・エラーメッセージ

メニュー①をクリックするとメニュー1~3が表示されますが
メニュー②をクリックしても、メニュー①側が動作して
メニューに重なってメニュー1~3が表示されてしまいます。
メニュー②を正常に動かすにはどうすればいのでしょうか?

※各メニューに対してJSを個別に設定すれば動作はするのですが
関数を用いてシンプルな記載で対応できないものかと思案しております。

どこを修正すればよいのか調べてみたのですが不明のため質問をさせていただきました。
当方初心者のため、記載事項に不手際もあるかと思いますがご容赦頂きたく、
ご教示のほどお願い致します。

該当のソースコード

<html> <head> <style> .menu{ width:300px; height:20px; border:solid 1px red; } .smenu{    list-style:none;    margin:0;    padding:0;    display:none; } </style> </head> <body> <ul> <li class="menu" onclick="test()">メニュー① <ul class="smenu"> <li>メニュー1</li> <li>メニュー2</li> <li>メニュー3</li> </ul> </li> <li class="menu" onclick="test()">メニュー② <ul class="smenu"> <li>メニュー4</li> <li>メニュー5</li> <li>メニュー6</li> </ul> </li> </ul> **<script> document.querySelector(".smenu").style.display ="none"; function test(){ var smenu = document.querySelector(".smenu"); if(smenu.style.display=="none"){ smenu.style.display="block"; }else{ smenu.style.display="none"; } } </script>** </body> </html>

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

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

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

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

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

kszk311

2018/03/05 13:27

jQuery使用OKですか?
kei344

2018/03/05 13:34

質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
guest

回答3

0

処理自体は yambejp さんのと似ていますが、表示/非表示はクラスの切替で。

<html> <head> <meta charset="utf-8"> <style> .menu { width: 300px; border: solid 1px red; } .smenu { list-style: none; margin: 0; padding: 0; display: none; } .smenu.active { display: block; } </style> </head> <body> <ul> <li class="menu">メニュー① <ul class="smenu"> <li>メニュー1</li> <li>メニュー2</li> <li>メニュー3</li> </ul> </li> <li class="menu">メニュー② <ul class="smenu"> <li>メニュー4</li> <li>メニュー5</li> <li>メニュー6</li> </ul> </li> </ul> <script> var menu = document.querySelectorAll( '.menu' ); Array.prototype.forEach.call( menu, function( item ) { item.addEventListener( 'click', function() { this.querySelector( '.smenu' ).classList.toggle( 'active' ); }); }); </script> </body> </html>

投稿2018/03/05 15:39

編集2018/03/05 15:44
takna

総合スコア784

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

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

退会済みユーザー

退会済みユーザー

2018/03/06 15:31

早速の回答有難う御座います。yambejp さんに説明ただいたので、taknaさん回答もなんとか消化できそうです。.classList.toggle( 'active' )についてはもう少し動作を調べてみたいと思います。同じ動作でもいろいろな書き方があり大変勉強になりました。有難う御座いました。
退会済みユーザー

退会済みユーザー

2018/03/06 15:31

早速の回答有難う御座います。yambejp さんに説明ただいたので、taknaさん回答もなんとか消化できそうです。.classList.toggle( 'active' )についてはもう少し動作を調べてみたいと思います。同じ動作でもいろいろな書き方があり大変勉強になりました。有難う御座いました。
guest

0

ベストアンサー

ご提示のHTMLにあわせるとこんな感じです

javascript

1window.addEventListener('DOMContentLoaded', function(e){ 2 Array.prototype.forEach.call(document.querySelectorAll(".menu"),function(x){ 3 x.querySelector('.smenu').style.display="none"; 4 x.addEventListener('click',function(e){ 5 var t=e.target; 6 var d=t.querySelector('.smenu').style.display; 7 t.querySelector('.smenu').style.display=(d=="none"?"":"none"); 8 }); 9 }); 10});

ただしCSSはもう少しシンプルにしないと設定が競合しています

CSS

1.menu{ 2width:300px; 3border:solid 1px red; 4} 5 6.smenu{ 7margin:0; 8padding:0; 9}

この上でHTMLはこんな感じ

HTML

1<ul> 2<li class="menu">メニュー① 3<ul class="smenu"> 4<li>メニュー1</li> 5<li>メニュー2</li> 6<li>メニュー3</li> 7</ul> 8</li> 9<li class="menu">メニュー② 10<ul class="smenu"> 11<li>メニュー4</li> 12<li>メニュー5</li> 13<li>メニュー6</li> 14</ul> 15</li> 16</ul>

解説付きひとまとめ

javascript

1<style> 2.menu{ 3width:300px; 4border:solid 1px red; 5} 6.smenu{ 7margin:0; 8padding:0; 9} 10</style> 11<script> 12/* DOMツリーの構築を待って発火 */ 13window.addEventListener('DOMContentLoaded', function(e){ 14 /* menuクラスのタグを全部つかむ */ 15 var menu=document.querySelectorAll(".menu"); 16 /* menuをぐるっと走査する */ 17 for(var i=0;i<menu.length;i++){ 18 var x=menu[i]; 19 /* menuないにあるsmenuの表示を消す */ 20 x.querySelector('.smenu').style.display="none"; 21 /* menuにclickイベントを付加する */ 22 x.addEventListener('click',function(e){ 23 /* イベントeを受け取って対象となるtを指定 */ 24 var t=e.target; 25 /* 対象t内にあるsmenuの現在の表示状態をdに保持 */ 26 var d=t.querySelector('.smenu').style.display; 27 /* もしdが"none"だった場合は空に、そうでない場合は"none"に */ 28 d=(d=="none"?"":"none"); 29 /* 対象tのsmenuの表示を変更 */ 30 t.querySelector('.smenu').style.display=d; 31 }); 32 } 33 /* 34 このforループを代替するのがArray.prototype.forEach.call()構文 35 */ 36}); 37</script> 38<ul> 39<li class="menu">メニュー① 40<ul class="smenu"> 41<li>メニュー1</li> 42<li>メニュー2</li> 43<li>メニュー3</li> 44</ul> 45</li> 46<li class="menu">メニュー② 47<ul class="smenu"> 48<li>メニュー4</li> 49<li>メニュー5</li> 50<li>メニュー6</li> 51</ul> 52</li> 53</ul>

投稿2018/03/05 13:41

編集2018/03/06 14:30
yambejp

総合スコア114572

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

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

退会済みユーザー

退会済みユーザー

2018/03/06 14:10

早速の回答有難う御座います。まだ初心者向けの本1冊読んだ程度でご教示いただいたものがまだまだ難解なものでして、可能であればJSの部分だけ1行毎に動きを説明いただいてもよいでしょうか。はじめてみる構文のため調べてみたもののどうにも頭の中で全体的に繋がりません。。。
yambejp

2018/03/06 14:31

解説を希望とのことなので、すこし分解して書いておきました それをまとめると元の回答のようなスクリプトになります
退会済みユーザー

退会済みユーザー

2018/03/06 15:21

丁寧ね説明有難う御座います。なるほど繰り返し処理を利用しているのですね。点が線になってきました。ちなみに var x=menu[i]; の[i]は配列を意味しているのでしょうか?
guest

0

いくつかやり方あったのですが、とりあえずJS使わずにシンプルに。

html

1 <ul> 2 <li class="menu"><label for="ck_acc_1">メニュー①</label> 3 <input type="checkbox" class="ck_acc" id="ck_acc_1"> 4 <ul class="smenu"> 5 <li>メニュー1</li> 6 <li>メニュー2</li> 7 <li>メニュー3</li> 8 </ul> 9 </li> 10 <li class="menu"><label for="ck_acc_2">メニュー②</label> 11 <input type="checkbox" class="ck_acc" id="ck_acc_2"> 12 <ul class="smenu"> 13 <li>メニュー4</li> 14 <li>メニュー5</li> 15 <li>メニュー6</li> 16 </ul> 17 </li> 18 </ul>

css

1 .menu{ 2 width:300px; 3 border:solid 1px red; 4 } 5 .smenu{ 6 list-style:none; 7 margin:0; 8 padding:0; 9 display:none; 10 } 11 .ck_acc:checked ~ .smenu { 12 display: block; 13 } 14 .ck_acc { 15 display: none; 16 }

メニューに重なってメニュー1~3が表示されてしまいます。

これは、. menuにheightが設定されているのが原因です。今回の例では、一応height外しておきました。

投稿2018/03/05 13:39

kszk311

総合スコア3404

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

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

退会済みユーザー

退会済みユーザー

2018/03/06 13:52

早速の回答有難う御座います。今回はCSSでの実現ではなくJSによる実現を目的としております。JSにこだわらない記述もあり、いろいろと参考になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問