前提・実現したいこと
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>
回答3件
あなたの回答
tips
プレビュー