JavaScript+CSSの動きでなぜこうなるかわかりません

前提・実現したいこと

親メニューを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>

kei344

2020/05/17 03:41

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

where

2020/05/17 03:44

kei344氏これは別の質問になってしまうかもしれませんが、メニューを2つ置いた場合の挙動がおかしいです hoverから外れても子メニューが閉じません <ul class="cp_sidebarmenu"> <li style="width:50%;height:100%"><a href="#" style="width:100%;height:100%" onmouseover="aaaa.style.transform = 'translateY(0%)'">親メニュー</a> <ul id="aaaa" style="width:100%;height:200px"> <li style="width:100%;height:100%;"><a href="#" style="width:100%;height:100%" onclick="aaaa.style.transform = 'translateY(-105%)'">子メニュー</a></li> </li> </ul> <li style="width:50%;height:100%"><a href="#" style="width:100%;height:100%" onmouseover="aaaa2.style.transform = 'translateY(0%)'">親メニュー2</a> <ul id="aaaa2" style="width:100%;height:200px"> <li style="width:100%;height:100%;"><a href="#" style="width:100%;height:100%" onclick="aaaa2.style.transform = 'translateY(-105%)'">子メニュー2</a></li> </li> </ul>

where

2020/05/17 03:45

親メニュー1をhoverした状態で親メニュー2をhoverすると親メニュー1の開いてる子メニューが閉じ、親メニュー2が開くはずなのですが、なぜでしょうか？

kei344

2020/05/17 03:47

別の質問です。新たに質問されるなりしてください。

where

2020/05/17 03:54

<ul class="cp_sidebarmenu"> <li style="width:50%;height:100%"><a href="#" style="width:100%;height:100%" onmouseover="aaaa.style.transform = 'translateY(0%)'" onmouseout="aaaa.style.transform = 'translateY(-105%)'">親メニュー</a> <ul id="aaaa" style="width:100%;height:200px"> <li style="width:100%;height:100%;"><a href="#" style="width:100%;height:100%" onclick="aaaa.style.transform = 'translateY(-105%)'">子メニュー</a></li> </li> </ul> <li style="width:50%;height:100%"><a href="#" style="width:100%;height:100%" onmouseover="aaaa2.style.transform = 'translateY(0%)'" onmouseout="aaaa2.style.transform = 'translateY(-105%)'">親メニュー2</a> <ul id="aaaa2" style="width:100%;height:200px"> <li style="width:100%;height:100%;"><a href="#" style="width:100%;height:100%" onclick="aaaa2.style.transform = 'translateY(-105%)'">子メニュー2</a></li> </li> </ul> 解決しましたありがとうございます

行動規範の内容に同意します

回答1件

ベストアンサー

そしてまた親メニューをクリックすると、

子メニューが開かないといった現象が起きます

'translateY(-105%)'が付いたままだからでは。
親メニューのクリック時にリセットするようにしてみてください。

投稿2020/05/17 03:31

kei344

総合スコア69606

where

2020/05/17 03:35

仰られる通り、 <li style="width:20%;height:100%"><a href="#" style="width:100%;height:100%" onclick="aaaa.style.transform = 'translateY(0%)'">親メニュー</a> としたら動作しましたありがとうございました

行動規範の内容に同意します