Q&A
現状ですべて表示されていると思うのですが、まず非表示にするということでしょうか？
<h2>のが押させたら <ul>を表示したいと考えております。 こういう場合は、javascriptで実現できるのでしょうか？html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5</head> 6<body> 7 <h2>メニュー</h2> 8 <ul> 9 <li><a>aaa</a></li> 10 <li><a>bbb</a></li> 11 <li><a>ccc</a></li> 12 </ul> 13 </body> 14 </html>
アドバイス頂けたら助かります。
回答3件
ベストアンサー
0
できますよ。たとえば、jQueryならクリックイベントで.show()メソッドなどを使えばいいです。
参考：開閉式のメニューを作る - jQuery 日本語リファレンス
投稿2019/09/20 08:32
総合スコア36930
0
方法1(CSS+JavaScript)
CSS
1ul:not(.show) { 2 visibility: hidden; 3}
JavaScript
1document.addEventListener('DOMContentLoaded', function() { 2 document.querySelector('h2').addEventListener('click', function(event) { 3 document.querySelector('ul').classList.toggle('show'); 4 }, false); 5}, false);
https://developer.mozilla.org/ja/docs/Web/API/Element/classList
方法2(HTML+JavaScript)
HTML
1 <ul hidden="hidden">
JavaScript
1document.addEventListener('DOMContentLoaded', function() { 2 document.querySelector('h2').addEventListener('click', function(event) { 3 document.querySelector('ul').toggleAttribute('hidden'); 4 }, false); 5}, false);
IE 不可
https://developer.mozilla.org/en-US/docs/Web/API/Element/toggleAttribute
投稿2019/09/20 09:12
総合スコア13749
あなたの回答
tips
プレビュー
