html - リンクが再度クリックされるまでdivをそこにとどめるにはどうすればよいですか?

Question

三角形をクリックしたときにのみ表示されるサイドバーを作成しようとしています。三角形をクリックすると、次のように表示されます。

sidebar {
display: none;
}

a:active + .sidebar {
    display: block;
}

しかし、手を離すとすぐに消えます。もう一度三角形をクリックするまで表示されたままにするにはどうすればよいですか? 以下は完全なコードへのリンクです。

http://jsfiddle.net/Vqmaw/

Answer 1

サイドバーの表示を切り替えるには、JS を使用する必要があります。CSS ソリューションは使用できません。

$('a').click(function () {
    $('.sidebar').toggle();
});

display: noneまた、.sidebar要素を設定する必要があります。私はあなたのフィドルを更新しました - http://jsfiddle.net/teddyrised/Vqmaw/3783/

変更したフィドルにはいくつかの問題があります。jQuery の代わりに MooTools を使用しており、クラス セレクターの形式が不適切です。