質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1142閲覧

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

where

総合スコア1

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2020/05/17 02:32

前提・実現したいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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%)'"><span style="width:100%;height:100%">親メニュー</span></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%)'"><span style="display: inline-block;width:100%;height:100%">子メニュー</span></a></li> </li> </ul> <li style="width:50%;height:100%"><a href="#" style="width:100%;height:100%" onmouseover="aaaa2.style.transform = 'translateY(0%)'"><span style="width:100%;height:100%">親メニュー2</span></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%)'"><span style="display: inline-block;width:100%;height:100%">子メニュー2</span></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%)'"><span style="width:100%;height:100%">親メニュー</span></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%)'"><span style="display: inline-block;width:100%;height:100%">子メニュー</span></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%)'"><span style="width:100%;height:100%">親メニュー2</span></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%)'"><span style="display: inline-block;width:100%;height:100%">子メニュー2</span></a></li> </li> </ul> 解決しました ありがとうございます
guest

回答1

0

ベストアンサー

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

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

'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%)'"><span style="width:100%;height:100%">親メニュー</span></a> としたら動作しました ありがとうございました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問