-
ID:9bGqdT さんの質問

【CSSのみ+ボタンを使わずにアコーディオンメニューを作りたい】

よくあるのが、チェックボックスやラジオボタンを挿入して、オンオフを判断する、というものかと思いますが、HTML上に(テキストブラウザから見た場合などに)意味のわからないボタンが残るのが気持ち悪く、できればボタンを使わずにアコーディオンを実装したいです。

こちら(http://black-flag.net/css/20101224-2270.html)のようなやり方でできると思ったのですが、1回目のクリックでメニューが開き2回クリックすると閉じる、という処理ができない(他のメニューを開かない限り、一度開いたメニューが閉じない)+メニューを開くたびに履歴が増え、例えばブラウザバックをする際にメニューを開いた回数分バックしないといけなくなる、という問題があり、困っています。

やはりCSSだけではボタンを挿入する方法以外に上記要件を満たすものは作れないでしょうか…。

みんなの回答 2 件

ID:5g2pdf さんの回答

チェックボックスやラジオボタン以外の要素だったらいいならこんな感じでしょうか

Edit fiddle - JSFiddle

http://jsfiddle.net/sugarshin/yN7ke/
ID:9bGqdT

これはとても参考になりそうです!
ありがとうございます。

ID:y8CivZ さんの回答

そもそもcssにそういう機能は提供されていないわけで、:checkedにしろ:targetにしろ、裏ワザ的なものでしょ。
ソースにこだわって:targetにするか、機能にこだわって:chekedにするか、両方共こだわるならJSでしょ。
:targetで実装して、historyはjsで管理するのが一番平和なんじゃないかな。JSオフでも動くわけだし。個人的にはJSの使いどころは「あったら便利」「なくても動く」な感じだと思う。

ID:y8CivZ

ちなみに、:checkedの方は、inputがdisplay:noneでも動くよ。
よく分かんないけど、テキストブラウザってdisplay:noneも解釈されちゃうの?

ID:9bGqdT

通信環境の悪い人やスマホ専門の人でも見てもらえるサイトを作りたいと思っているので、スクリプトを使うより、CSSだけで表現できるものはなるべくCSSで対応したいと思ったのです。
JSを使うのが一番楽でソースもきれいになるとは思うのですが…。

テキストブラウザ、というよりもCSSを外した状態で見ても意味の通じるサイトを作りたい、ということです。紛らわしくてすみません。

最終更新日:2014-06-20 (6,539 views)

関連するトピックス

ページ上部に戻る