ID非公開

2022/1/11 21:33

33回答

JavaScript(jQuery)について質問です。

画像
補足

画像のものは閉じると menu1▼ menu2▼ menu3 ですね。 他にも、menu1.2であるべき所がmenu1.1だったりmenu2.2であるべき所が。。。 ご容赦ください。

JavaScript102閲覧xmlns="http://www.w3.org/2000/svg">500

ベストアンサー

2

2人がナイス!しています

【 開閉動作:子孫 】 子孫については、 「閉じる」動作の場合に、 すべての子孫 <ol> の高さを 0px にすればいいだけ。 ──────────────── if( ! open ) { ol.querySelectorAll( "ol" ).forEach( child => { child.closest( "li" ).classList.remove( "open" ); child.style.height = "0px"; } ); } ────────────────

ThanksImg質問者からのお礼コメント

求めていたものでもあり、一方で、予想を超える素晴らしい内容で驚きました。本当にありがとうございます。 また、他の回答者様も時間を割いてコードを書いて下さり感謝しております。次回はもう少し質問の仕方を見直さねばと私自身反省です。 とかく回答してくださった皆様、どうもありがとうございました☆

お礼日時:1/13 14:40

その他の回答(2件)

0

メニューの開閉処理はCSSでやった方がいいと思います。 例えばこんな感じ。 [HTML] <div class="menu"> <button type="button" onclick="this.parentElement.classList.toggle('open')"></button> <ol> <li>知恵袋▽ <ol> <li>趣味</li> <li>仕事▼ <ol> <li>農業</li> <li>工業</li> <li>サービス業</li> </ol> </li> </ol> </li> <li>教えてgoo</li> </ol> </div> [CSS] <style> .menu ol { counter-reset: section; } .menu li { list-style: none; } .menu ol > li:before { content: counters(section, '.') '. '; counter-increment: section; } .menu > button::before { content: "OPEN"; } .menu.open > button::before { content: "CLOSE"; } .menu > ol > li > ol { overflow: hidden; line-height: 0%; transition: line-height 1s; } .menu.open > ol > li > ol { line-height: 125%; } </style> JavaScriptはonclickの部分のみです。

ID非公開

質問者2022/1/13 14:13

お礼が遅れまして申し訳ありません。回答いただきありがとうございます。 実際にやってみましたが、確かに全体の開閉は実現するのですが、私の質問の仕方が足りなかったようです。 実装したかったのはoishii_mahouさんの教えてくださったものです。開閉の滑らかさが良いですね♪他のアコーディオンで使ってみたいなと思います。感謝です! 感謝です!

0

ID非公開さん >・・・・openボタンを押せば全て開き、closeボタンを押せば全て閉じる・・・・・・・ ご参考に↓ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <style> .hide{ display:none; } </style> </head> <body> <button type="button" onclick="view()">⚫open</button> <button type="button" onclick="hid()">⚫close</button> <ol> <li>知恵袋▽ <ol class="hide" type=a> <li>I趣味</li> <li>仕事▼ <ol type=i> <li>農業</li> <li>工業</li> <li>サービス業</li> </ol> </li> <li>教養</li> </ol> </li> <li>教えてgoo</li> </ol> <script> function view(){ document.querySelector(".hide").style.display = "block"; } function hid(){ document.querySelector(".hide").style.display = "none"; } </script> </body> </html>

ID非公開

質問者2022/1/13 14:11

お礼が遅れまして申し訳ありません。回答いただきありがとうございます。 実際にやってみましたが、確かに全体の開閉は実現するのですが、私の質問の仕方が足りなかったようです。 実装したかったのはoishii_mahouさんの教えてくださったものです。でも、勉強になりました♪感謝です!