折りたたみが最も簡単 details と summary をjQueryに置き換えるメモ

summaryの中にリンクを入れたい

折りたたみの基本の形はこうでした。

タイトル
コンテナ

タイトル部分クリックで隣接コンテナが開きます。

この折りたたみ、ただ折りたたむためのボタンとしてのみ利用するならこの状態で十分ですが、それ以外に「こうなればいいのにな」という希望が一つ出てきます。リンクのテキストを置きたいということです。

どういう使い方を想定しているかというと、WordPressのプラグインでいうと「Collapsing Categories」です。このプラグインが好きすぎて手放せなかったのですが、でもそろそろ手放したい、手放すとなれば自作したい、ということで、画像ですがこのような使い方という例です。

クリックで開閉するメニューですね。三角印をクリックしたら折りたたみ、でもその中のテキストはリンクになってます。

タイトル
コンテナ

この形のタイトル部分に<a>タグとテキストを置いても、リンクにならないんです。折りたたみが優先されます。

この部分に<a>タグが含まれていれば〜。みたいな条件を書けばいいと思ったんですがやってみても上手く行かず、さっくり諦めました。
Collapsing Categories ではできているし、きっと世の天才プログラマーたちなら「こうすればいいだけだよ。簡単だろ?」と麻生太郎かケネディさんみたいに言いきると思うのですが私はアホですから何も思い浮かばず、その代わり、アナクロ的にスクリプトをもう一個追加したんです。

展開クリックとタイトル部分を分けたもう一つのスクリプト

基本の形は

タイトル
コンテナ

で、タイトルをクリックしたら隣接するコンテナが表示されるスクリプトでした。
これを幼稚園児並みの応用として、こうしました。

三角印のクリック部分
タイトル
コンテナ

箱を三つにして、スクリプトでは「三角印がクリックされたら、隣接の隣接のコンテナを表示」と書いただけです。

jQuery(function(){
    jQuery('.js-click').each(function(){
        jQuery(this).on('click',function(){
           jQuery(this).toggleClass('open');
            jQuery("+.summary+.js-container",this).slideToggle(300);
            return false;
        });
    });
});

cssでは三角印(.js-click)とタイトル(summary)が繋がって見えるよう、 summary を inline-block にしたりアイコンフォントとheightを揃えたりします。

三角印に隣接するsummary
summryに隣接する畳まれる部分

 

ちゃんと装飾はしていないので箱サイズがバラバラですが、判りやすく枠付きで表示するとこうですね。summaryの部分はリンクだろうが何だろうかどうとでもしてOKな部分です。スクリプトの動きに直接関与していません。
ものすごく安直な解決策ですがやりたいことは実現できました。

二つのスクリプト、ひとつは「クリックしたら隣接を表示トグル」もうひとつは「クリックしたら隣接の隣接を表示トグル」です。ですので、クリックする場所のclass名を変えて、スクリプトも変えてやったというわけです。

これでまず大抵のやりたいことが実現できました。めでたしめでたし。

でもまだこの記事は終わりません。もうひとつ、オマケで同じスクリプトを用意したのです。

このオマケスクリプトは、全く何一つ工夫を加えていません。最初に紹介した「クリックしたら隣接を表示トグル」と同じやつです。

同じやつを追加した?何のこと?どういうこと?こういうことです。

次ページ