冬言響 / 日記

開いたメニューを閉じる(追記あり)

こないだの続き。「≡」をクリックしてサイドバーを開いたあとまた「≡」をクリックすれば閉じるのだけど、このテの開いたやつってそれ以外の領域をクリックすることでも閉じられるのが割と一般的だと思うのな。そこそこ縦に長いので下のほうまでスクロールしたあと閉じるためにまた上まで戻るのもダルいし。

なのでjQueryでそれっぽいこと出来るようにしてみた。あくまでぽい。

$("body > article").click(function() {
    $("body > aside details").removeAttr("open");
    });

details 要素は open 属性が設定されてると表示されて無くなると非表示になる。初期状態では非設定で summary 要素が選択されると open 属性が設定される。この open 属性を、article 要素＝記事本文が表示されている領域をクリックすることでも除去するようにしてみた。

article 要素にしか設定してないのでそれ以外の、記事と記事との隙間の(今のスタイル設定だと)灰色の部分なんかには反応しない。body 要素に設定してやればどこでも反応するのだけど、サイドバー領域内にも反応してしまう。

details が open になったらなんかてきとうな div 要素とか生成して全面覆った大きさにして上から重ねて aside をさらにその上に重ねるようにしてその div 要素に details を閉じるイベントを設定、とかしてやると良いのかな。ついでにその div を半透明とかにしてやると見た目的にも宜しい。

でも面倒くさいので良いや。

$("body").click(function(event) {
    if(!$(event.target).closest("aside").length) {
        $("body > aside details").removeAttr("open");
        }
    });