javascript
1document.addEventListener('DOMContentLoaded', function() {2 const menuItems = document.querySelectorAll('.menu-item, .submenu-item');3 4 menuItems.forEach(item => {5 item.addEventListener('mouseenter', function() {6 7 //PC閲覧時にホバーで表示。8 const dropdown = this.querySelector('.dropdown');9 if (dropdown) {10 dropdown.style.display = 'block';11 }12 });13 //PC閲覧時にホバーアウトで非表示。14 item.addEventListener('mouseleave', function() {15 const dropdown = this.querySelector('.dropdown');16 if (dropdown) {17 dropdown.style.display = 'none';18 }19 });20 21 //（※問題の箇所）スマホ閲覧時にタップで開閉する。22 item.addEventListener('touchstart', function() {23 const dropdown = this.children;//←メニューリストの中にメニューリストがあるので選択箇所の子要素を取得するようにしています。24 if (dropdown.style.display === 'none') {//非表示の場合、25 dropdown.style.display = 'block';//表示する。26 }else{//表示していたら、27 dropdown.style.display = 'none';//非表示にする。28 }29 });30 });31});
PC閲覧時はホバーでメニュー内のリストが表示される仕組みです。
スマホ版はアコーディオンメニュー風になるようにしています。
ただPC版でイベントハンドラにホバーを使っているためホバーが出来ないスマホ版はどうするか…となりスマホ用に.addEventListenerへtouchstartを設定してみました。これで「タップして開いたところをもう一度タップで閉じる」というアコーディオンメニューの動きが出来ると思ったのですが、開くだけで閉じませんでした。
どこが間違っているでしょうか？
HTML＆CSS
1<!DOCTYPE html> 2<html> 3 <head> 4 <script type="text/javascript" src="xxxx.js"></script> 5 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> 6 <meta charset="UTF-8"> 7 <style> 8 nav { 9 background-color: #333; 10 padding: 1rem; 11 } 12 .menu { 13 list-style: none; 14 padding: 0; 15 margin: 0; 16 display: flex; 17 } 18 19 .menu-item { 20 margin-right: 1rem; 21 color: white; 22 cursor: pointer; 23 position: relative; 24 } 25 .dropdown { 26 display: none; 27 position: absolute; 28 top: 100%; 29 left: 0; 30 background-color: #444; 31 list-style: none; 32 padding: 0; 33 margin: 0; 34 min-width: 150px; 35 } 36 .submenu-item .dropdown { 37 top: 0; 38 left: 100%; 39 40 } 41 .dropdown{ 42 height: 300px; 43 } 44 .dropdown li { 45 padding: 0.5rem; 46 color: white; 47 } 48 .dropdown li:hover { 49 background-color: #555; 50 } 51 /* ↓スマホーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */ 52 @media screen and (max-width: 830px) { 53 .menu { 54 flex-direction: column; 55 } 56 .menu li, .dropdown { 57 position: initial; 58 } 59 .dropdown{ 60 height: initial; 61 } 62 } 63 </style> 64 </head> 65 <title> 66 </title> 67 <body> 68 <nav> 69 <ul class="menu"> 70 <li class="menu-item">メニューA 71 <ul class="dropdown"> 72 <li class="submenu-item">サブメニューA1 73 <ul class="dropdown"> 74 <li>アイテムリストA1</li> 75 <li>アイテムリストA1</li> 76 <li class="submenu-item">アイテムリストA1＋ 77 <ul class="dropdown"> 78 <li>アイテムリスト+1</li> 79 <li>アイテムリスト+1</li> 80 </ul> 81 </li> 82 </ul> 83 </li> 84 <li class="submenu-item">サブメニューA2 85 <ul class="dropdown"> 86 <li>アイテムリストA2</li> 87 <li>アイテムリストA2</li> 88 </ul> 89 </li> 90 </ul> 91 </li> 92 <li class="menu-item">メニューB 93 <ul class="dropdown"> 94 <li class="submenu-item">サブメニューB1 95 <ul class="dropdown"> 96 <li>アイテムリストB1</li> 97 <li>アイテムリストB1</li> 98 </ul> 99 </li> 100 <li class="submenu-item">サブメニューB2 101 <ul class="dropdown"> 102 <li>アイテムリストB2</li> 103 <li>アイテムリストB2</li> 104 </ul> 105 </li> 106 <li class="submenu-item">サブメニューB3 107 <ul class="dropdown"> 108 <li>アイテムリストB3</li> 109 <li>アイテムリストB3</li> 110 </ul> 111 </li> 112 </ul> 113 </li> 114 <li class="menu-item">メニューC 115 <ul class="dropdown"> 116 <li class="submenu-item">サブメニューC1 117 <ul class="dropdown"> 118 <li>アイテムリストC1</li> 119 <li>アイテムリストC1</li> 120 </ul> 121 </li> 122 <li class="submenu-item">サブメニューC2 123 <ul class="dropdown"> 124 <li>アイテムリストC2</li> 125 <li>アイテムリストC2</li> 126 </ul> 127 </li> 128 </ul> 129 </li> 130 </ul> 131 </nav> 132 <main> 133 </body> 134</html>
0 コメント