propellerkitでリストのアコーディオン実装

はじめに

アコーディオンとは、クリックすると隠れていたコンテンツがずる〜っと現れるアレです。
今回はこのアコーディオンを作成していきます。

完成形はこちらです。
f:id:haruka-i1997:20170830151519g:plain


利用するもの

・propellerkit Accordion
 propeller.in

リストデザイン

まずはリストのデザインを見ていきましょう。

以下の記事を参考にさせていただきました。
weboook.blog22.fc2.com


main.html

<div>
  <ul class="menu">
     <li>
        <a>メニュー1</a>
     </li>
     <ul>
         <li><a>メニュー1-A</a></li>
         <li><a>メニュー1-B</a></li>
         <li><a>メニュー1-C</a></li>
     </ul>
     <li>
         <a>メニュー2</a>
     </li>
     <ul>
         <li><a>メニュー2-A</a></li>
         <li><a>メニュー2-B</a></li>
         <li><a>メニュー2-C</a></li>
     </ul>
     <li>
        <a>メニュー3</a>
     </li>
     <ul>
        <li><a>メニュー3-A</a></li>
        <li><a>メニュー3-B</a></li>
        <li><a>メニュー3-C</a></li>
     </ul>
  </ul>
</div>


main.css

.menu {
    width: 500px;
    padding: 0;
    margin: 30px;
}
.menu li {
    overflow: hidden;
    border-bottom: 1px solid #fff;
    cursor: pointer;
}

.menu li a {
    display: block;
    position: relative;
    padding: 0px 10px 0px 50px;
    background: #f2f2f2;
    color: #494949;
    font-size: 14px;
    line-height: 40px;
}

.menu li a:before {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 25px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: #457B9D;
    transition-property:all;
    transition: 0.2s linear;
    color: #494949;
}
.menu li a:hover:before {
    left: -16px;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    transition-property:all;
    transition: 0.2s linear;
    color: #494949;
}


まだアコーディオンは実装していないのでこんな感じです。
クリックしても変化はありません。
f:id:haruka-i1997:20170830153330p:plain


それでは、これからアコーディオンの実装をしていきます。

main.html

<div>
  <ul class="menu">
     <li href="#/main#menu1" data-toggle="collapse">
        <a>メニュー1</a>
     </li>
     <ul id="menu1"class="panel-collapse collapse">
         <li><a>メニュー1-A</a></li>
         <li><a>メニュー1-B</a></li>
         <li><a>メニュー1-C</a></li>
     </ul>
     <li href="#/main#menu2" data-toggle="collapse">
         <a>メニュー2</a>
     </li>
     <ul id="menu2"class="panel-collapse collapse">
         <li><a>メニュー2-A</a></li>
         <li><a>メニュー2-B</a></li>
         <li><a>メニュー2-C</a></li>
     </ul>
     <li href="#/main#menu3" data-toggle="collapse">
        <a>メニュー3</a>
     </li>
     <ul id="menu3"class="panel-collapse collapse">
        <li><a>メニュー3-A</a></li>
        <li><a>メニュー3-B</a></li>
        <li><a>メニュー3-C</a></li>
     </ul>
  </ul>
</div>


大体は上記URLにあるpropellerkitサイトの通りです。
が、説明のため必要でない箇所は極力省いています。


ポイント解説

liタグにある

data-toggle="collapse"

これはアコーディオンコンポーネント
この一文がなければ開閉の動作ができません。

同じくulタグにある

class="panel-collapse collapse"

これもアコーディオンの実装に大切なコードです。
なくても開閉動作はできますが若干挙動がおかしくなります。
安定した動作のためにも書いておく方が良いですね。

ちなみに

class="panel-collapse collapse in"

最後に「in」を入れると、開いた状態が初期状態となります。


liタグにある

href="#/main#menu1"

ここで、親リストをクリックした際に、どの子リストを開閉するのかを決定します。

「#/main」がhtmlのページの名前です。
「#menu1」が子リストの名前です。

子リストの名前は、ulタグにある

id="menu1"

このようにidで指定します。

こうすることで、親リストと子リストが結びつき、
クリックした親リストに結びついている子リストのみが開閉されます。

因みに上記で書いた「#/main」の部分ですが、
これはAngularJSで$routeProviderを使用している時のみ必要となります。

$routeProviderを使用しているときは、
定義しているhtmlの名前をhrefに含めないと
全く違うページに飛ばされてしまう場合があるからです。


さいごに

これでリストのアコーディオン実装は終了です。
ごく基本の形しか書いていないので、色々オプションをつけたいときは上記URLの公式ページで見てください。

以上です。