前提・実現したいこと
親メニューをhoverした際に子メニューが出ます
子メニューをクリックすると
onclick="aaaa.style.transform = 'translateY(-105%)'"
で子メニューが閉じます
そしてまた親メニューをクリックすると、
子メニューが開かないといった現象が起きます
これはなぜでしょうか、また対処法はありますでしょうか
該当のソースコード
HTML
1<ul class="cp_sidebarmenu"> 2<li style="width:20%;height:100%"><a href="#" style="width:100%;height:100%"><span style="width:100%;height:100%">親メニュー</span></a> 3<ul id="aaaa" style="width:100%;height:200px"> 4<li style="width:100%;height:100%;" onclick="aaaa.style.transform = 'translateY(-105%)'"><a href="#" style="width:100%;height:100%"><span style="display: inline-block;width:100%;height:100%">子メニュー</span></a></li> 5</li> 6</ul>
該当のソースコード
CSS
1<style> 2.cp_sidebarmenu { 3width:100%; 4font-size: 0; 5position: absolute; 6z-index: 10; 7top: 0; 8left: 0; 9height: 5%; 10padding: 0.6em 0; 11text-align: center; 12color: white; 13background: black; 14} 15.cp_sidebarmenu li { 16display: inline; 17height: 100%; 18position: relative; 19list-style: none; 20pointer-events: none; 21float:left; 22} 23.cp_sidebarmenu a { 24font-size: 8px; 25line-height: 100%; 26position: relative; 27display: block; 28-webkit-transition: background 0.3s; 29transition: background 0.3s; 30text-decoration: none; 31pointer-events: auto; 32color: #ffffff; 33} 34.cp_sidebarmenu a:active, 35.cp_sidebarmenu a:focus { 36 37background: black; 38} 39 40.cp_sidebarmenu li:hover ul { 41 42-webkit-transform: translateY(0); 43transform: translateY(0); 44background: black; 45} 46.cp_sidebarmenu > li { 47height:10%; 48display: block; 49} 50.cp_sidebarmenu > li > a { 51height:100%; 52background: red; 53} 54.cp_sidebarmenu > li > a > span { 55display: inline-block; 56height:100%; 57 58} 59.cp_sidebarmenu > li:hover { 60z-index: 100; 61} 62.cp_sidebarmenu > li:hover a { 63background: black; 64} 65.cp_sidebarmenu > li a:hover { 66background: gray; 67} 68.cp_sidebarmenu > li:hover a:after { 69opacity: 1; 70} 71.cp_sidebarmenu > li ul { 72position: absolute; 73z-index: -1; 74top: 0; 75top: 100%; 76width: auto; 77height: 100%; 78-webkit-transition: 0.5s -webkit-transform; 79transition: 0.5s -webkit-transform; 80transition: 0.5s transform; 81transition: 0.5s transform, 0.5s -webkit-transform; 82-webkit-transform: translateY(-105%); 83transform: translateY(-105%); 84white-space: nowrap; 85background: black; 86padding: 0; 87} 88</style>
回答1件
あなたの回答
tips
プレビュー