【CSSのみ+ボタンを使わずにアコーディオンメニューを作りたい】
よくあるのが、チェックボックスやラジオボタンを挿入して、オンオフを判断する、というものかと思いますが、HTML上に(テキストブラウザから見た場合などに)意味のわからないボタンが残るのが気持ち悪く、できればボタンを使わずにアコーディオンを実装したいです。
こちら(http://black-flag.net/css/20101224-2270.html)のようなやり方でできると思ったのですが、1回目のクリックでメニューが開き2回クリックすると閉じる、という処理ができない(他のメニューを開かない限り、一度開いたメニューが閉じない)+メニューを開くたびに履歴が増え、例えばブラウザバックをする際にメニューを開いた回数分バックしないといけなくなる、という問題があり、困っています。
やはりCSSだけではボタンを挿入する方法以外に上記要件を満たすものは作れないでしょうか…。
みんなの回答 2 件
チェックボックスやラジオボタン以外の要素だったらいいならこんな感じでしょうか
Edit fiddle - JSFiddle
http://jsfiddle.net/sugarshin/yN7ke/そもそもcssにそういう機能は提供されていないわけで、:checkedにしろ:targetにしろ、裏ワザ的なものでしょ。
ソースにこだわって:targetにするか、機能にこだわって:chekedにするか、両方共こだわるならJSでしょ。
:targetで実装して、historyはjsで管理するのが一番平和なんじゃないかな。JSオフでも動くわけだし。個人的にはJSの使いどころは「あったら便利」「なくても動く」な感じだと思う。
関連するトピックス