急いでいます！

アコーディオンメニューが思うように動作しません。

解決済

質問者：M-KINOKO
質問日時：2023/08/20 16:48
回答数：1件

HPを作っています。メニューの大項目をクリックすると、フワッと小項目がフェードインしながら下へスライドして表示されるようにしました。ところが、この動作が一度クリックすると二度目以降は普通に小項目がドン！っと表示されるだけになってしまいます。画面を再読み込みすると一度目のクリックでは動作が復活するのですが、二度目以降はやはり動作しません。おおまかなコードは以下の通りです。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>MENU</title>
<style type="text/css">
a { text-decoration: none; }

/* Chrome、Safari以外 */
summary {
display: block;}
/* Chrome、Safari */
summary::-webkit-details-marker {
display: none;}
summary {
cursor: pointer;
transition: 0.5s; /* 変化を滑らかに */}
/* ホバー時のスタイル */
summary:hover {
background-color: #EFEFEF;}
details[open] summary {
color: #000000;
background-color: #EFEFEF;}
/* オープン時にアニメーションを設定 */
details[open] .details-content {
animation: fadeIn 0.5s ease;}
@keyframes fadeIn {
0% {
opacity: 0; /* 透明 */
transform: translateY(-10px); /* 上から表示 */}
100% {
opacity: 1;
transform: none;}
</style>
</head>
<body link="#000000" vlink="#ffffff" alink="#008b8b">
<body bgcolor="#ff8000">

 <details><summary>〇〇</summary>
<ul style="list-style: none; padding-left: 0">

１２３</li>
<li><div class="details-content">〇〇

〇〇</li>
<li><div class="details-content">〇〇 

１２３ </li>
〇〇 

１２３ </li>
〇〇 

１２３ </li>
</a>
</ul>
</div>
</details>
 
<details><summary>〇〇</summary>
<ul style="list-style: none; padding-left: 0">
<li><div class="details-content">１２３
<li><div class="details-content">〇〇
１２３
 </li></ul>
</details>
 
<details><summary>〇〇</summary>
<ul style="list-style: none; padding-left: 0">
<li><div class="details-content">
１２３ </li></ul>
</details>
</body>
</html>

改善策はありますか？どなたかお分かりになる方がいらっしゃいましたらご教授お願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.1ベストアンサー

回答者： fujillin
回答日時：2023/08/20 23:53

こんばんは

fxなどでは、ご希望通りにアニメーションが繰り返されますね。
多分、レンダリングエンジンの違いではないでしょうか？
detailsタグは、元々開閉機能を備えた特殊なタグなので、このような機能上の違いが起きてしまうのかと推測します。

chrome等(Blink系)ではdetailsを「OPENした」（あるいはアニメーションが100％に達した）という情報がどこかに残っていて、二度目以降はアニメーションが行われず、いきなり100％の表示になってしまうようです。
fx(Gecko系)では閉じた時に、ちゃんとクリアされるようです。

＞改善策はありますか？
CSSのみでアコーディオンを実現するにしても、他にもいろいろな方法がありますので、特殊な要素であるdetailsを用いない方法で行えば、ご希望のような動作にできるものと思います。
どうしても、detailsで実現したい場合は、Gecko系限定にするか、あるいはスクリプトによるアニメーションに変更するとかでしょうか。

なお、ご質問には関係ありませんけれど・・
・ご提示のHTMLは、開始タグ、終了タグの関係がおかしいですし、目的のよくわからないタグもいろいろありますけれど、できるだけ単純化して整理した方が視認性はよくなります。
・Fontタグが多用されていますが、非推奨となっていますので、CSSに移行なさった方が宜しいでしょう。
https://developer.mozilla.org/ja/docs/Web/HTML/E …

- 0
- 件

通報する

この回答へのお礼

大変わかりやすいご説明ありがとうございます。いろいろ試して、希望に近いものを作れるよう工夫してみます。
Fontタグが非推奨となっているのは知りませんでした…。リンクありがとうございます。大変参考になります。
基本、タグはコピペしてしまうので、とっ散らかっているな…との自覚はありました(笑) もっと勉強して、整理できるように頑張ります。
丁寧なご説明とアドバイス、誠にありがとうございました。

通報する

お礼日時：2023/08/22 07:32

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！