« デザインて難しいですね(´・ω・`) | ホーム | MTの再構築中に「500」でエラー落ちするときの設定備忘 »

2012年4月19日

MT+jQueryで開閉できる(アコーディオンぽいの)階層リストを作る方法の忘備用日記

題名なげー(あいさつ)


そんなわけで題名の通り、MT(Movable Type 5)とjQueryを使った階層リストの作り方です(`・ω・´) 見ている人はいないかと思いますが、万が一のためにですます調です(ゝω・)v

事の発端:

このリスト、階層になってて使いやすいけど、項目多すぎて返って見難いよね(´・ω・`)

その言葉からボクの苦難の道は始まったのでした...。

面倒なのでさっさと方法だけ書いていきます。

※MT5.13のプロフェッショナルブログ(個人用)で作業しましたが、MTのタグとjQueryをちょちょいっといじるだけなので、 他のブログでも応用できると思います。

そんなわけで、手を加えるのは次の3つです。

  1. MTのウィジェットのカテゴリアーカイブ(階層化されたリストの作成部分)
  2. jQuery(リストの開閉部分)
  3. CSS(見た目を整える部分)

1. MTのウィジェットのカテゴリアーカイブ(階層化されたリストの作成部分)

まずはリストの作成です。用はこの後のjQueryで制御するためのタグを付けてあげるだけなのですが、 MTは専用タグを駆使して自動でリストを作れるので、そこの書き方です。

※ただし、今回作るリストは正確にはHTMLの定義とは外れたその後IEが対応していないことに気が付いたので、 直しました(´・ω・`)

  • +リスト
    • +子リスト
      • 孫リスト
      • 孫リスト
      • 孫リスト

    • 子リスト
    • 子リスト
    • 子リスト
  • リスト
  • リスト
  • リスト

↓:ソース

 <ul> 
     <li class="accordion">
         <span class="button">+</span>リスト</a>
         <ul>
             <li class="accordion">
                 <span class="button">+</span>子リスト</a>
                 <ul>
                     <li>孫リスト</li>
                     <li>孫リスト</li>
                     <li>孫リスト</li>
                 </ul>
             <li>子リスト</li>
             <li>子リスト</li>
             <li>子リスト</li>
         </ul>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
</ul>

こんな感じのリストがあると「+」の部分を押せば入れ子のリストが表示出来るようになります。

これをMTのタグを使って、自動的に作成させる(カテゴリの場合)には↓

<mt:TopLevelCategories>
    <mt:SubCatIsFirst>
    <ul>
    </mt:SubCatIsFirst>
    <mt:If tag="CategoryCount">
     <MTHasSubCategories>
        <li class="accordion">
            <span class="button">+</span><a href="<$mt:CategoryArchiveLink$>"<mt:If tag="CategoryDescription"> title="<$mt:CategoryDescription remove_html="1" encode_html="1"$>"</mt:If>><$mt:CategoryLabel$> (<$mt:CategoryCount$>)</a>
      </MTHasSubCategories>
      <MTHasNoSubCategories>
        <li>
            <span class="sub_list">-</span><a href="<$mt:CategoryArchiveLink$>"<mt:If tag="CategoryDescription"> title="<$mt:CategoryDescription remove_html="1" encode_html="1"$>"</mt:If>><$mt:CategoryLabel$> (<$mt:CategoryCount$>)</a>
      </MTHasNoSubCategories>
    <mt:Else>
        <li class="none_anchor"><$mt:CategoryLabel$>
    </mt:If>
    <$mt:SubCatsRecurse$>
        </li>
    <mt:SubCatIsLast>
    </ul>
    </mt:SubCatIsLast>
</mt:TopLevelCategories>

こんな感じに書いてあげます。これは一番上のカテゴリから順番にカテゴリ表示していき、サブカテゴリがあったら「+」ボタンを付けて行きます。

    <mt:Else>
        <li class="none_anchor"><$mt:CategoryLabel$>

の部分はCSSで少し調整が必要だったので、調整用にクラス要素を追加しています。

2. jQuery(リストの開閉部分)

次にjQueryです。元々はググって最初に出てきたサイトを参考にさせて頂いていましたが、ボクの実装の仕方が不味かったらしく、 IEで使うことが出来ませんでした。 色々と悩みググりした結果スマートフォンサイト制作ブログさんのjQuery(+CSS3)で作るアコーディオンメニュー(2段アコーディオン対応)の方法が使えると言うことが分かったのです(`・ω・´)

$(document).ready(function(){
    $(".button").hover(
        function(){$(this).css("cursor","pointer");},
        function(){$(this).css("cursor","default");}
        );

    $(".accordion ul").css("display","none");
    $(".button").click(function(){
        $(this).nextAll("ul").slideToggle("fast");
        });
});

※リンク先にあるソースを改造してあります。

    $(".button").hover(
        function(){$(this).css("cursor","pointer");},
        function(){$(this).css("cursor","default");}
        );

ここでカーソルを指先ポインタに変更してクリック出来るに見せます。「.button」は <span></span> であり、<a href="..."></a> ではないので、そのままだとクリック出来るように見えません(´・ω・`)

    $(".accordion ul").css("display","none");
    $(".button").click(function(){
        $(this).nextAll("ul").slideToggle("fast");
        });

ここで普段入れ子のリスト部分を隠しておいて、「.button」を押すとリストが表示されるようにしています。

3. CSS(見た目を整える部分)

最後にCSSです。ここは環境によって変わってくると思いますが、「.button」の部分は↓のように設定すると、ボタンのように表示できます(`・ω・´)

.button{
    margin-right: 0.5em;
    padding: 0 0.25em;
    color: gray;
    border: solid 1px;
    }

以上、アコーディオンを使った階層リストの作り方でした。ボクが作ったものはこれ+ボタンを押すと「+」から「-」になると言うものですが、そこに関しては企業秘密?と言うことで(ゝω・)v

コメントする