階層型のカテゴリとかリストを開閉できるライブラリ作った

誰も期待してないどうでもいいカミングアウトをすると、実は僕は数ヶ月前に会社を辞め、晴れて日本人男性の最も憧れる職業「無職」へのジョブチェンジというかジョブロストを果たしていた訳であります。
１年もwebのこと勉強してればwebサービスの１つくらいは１ヶ月もありゃあ作れるだろ！tumblrとかpinterestくらいのもんなら余裕だしｗｗｗｗとか思って密かに３つほどプロジェクトを進めていたのですが、案の定僕の（プログラミング能力・設計能力・システム構築能力・企画能力・デザイン能力・根気などの）能力不足によってリリースどころか完成までこぎつけることが出来ず、どれもこれも頓挫と相成ったわけであります。

今考えてみれば、業務でプログラム書いた覚えなんてどれも100行いかない程度の滅茶苦茶なjavascriptとphpとシェルスクリプトくらいなもので、休日に自分でプログラムを必死に勉強していたなどというわけもなく、とにかくそんな人間が簡単にwebサービスなんぞ作れるわけないのは火を見るより明らかなのですが、天才と紙一重どころか馬鹿一直線な僕はそんなことに気づくはずもなく、次世代のザッカーバーグを、あの億万長者のくせに嫁がぶっさいくなザッカーバーグを目指してひた走ってはひっそりとクラッシュクラッシュしていたわけであります。

それでも毎日起きている時はパソコンに向かって色々していた中で、ライブラリ的なものがいくつか作れたのでそれを公開しようと思った次第であります。

openRec.js

というわけで本題なのですが、タイトルの通り階層型のカテゴリとかリストを開閉できるやつです。2階層くらいのやつならよく見かけるのですが、2階層以上のものは見つからなかったので作りました。
ホントはプロトタイプ的なものはだいぶ前に2,3時間で作ったのですが、機能追加してたら半日くらいかかってやっぱり自分の能力のなさに涙が溢れます。
jqueryとかのライブラリに依存してないので、単体で使えます。

https://github.com/shim0mura/openRec.js

2012-03-08 1st - jsdo.it - share JavaScript, HTML5 and CSS

new OpenRec(document.getElementById("container"));

みたいな感じで使えます。開閉したいHTMLを包むHTMLElementを第一引数に指定します。

<ul>
  <li>
    <div>class1</div>
    <ul>
      <li><a href="#">class2</a></li>
      <li><a href="#">class2</a></li>
      <li><a href="#">class2</a></li>
    </ul>
  </li>
</ul>

上のような構造のHTMLを開閉したい場合、普通にnewしただけだとulタグどころかdivタグまで開閉しようとします。開閉させたくない要素がある場合は、開閉させたいタグに対して特定のクラス名を付けて、そのクラス名をnewの時の第二引数に指定すると、いい感じに開閉しなくなります。

<ul id="container">
  <li class="open">
    <div>class1</div>
    <ul class="open">
      <li><a href="#">class2</a></li>
      <li><a href="#">class2</a></li>
      <li><a href="#">class2</a></li>
    </ul>
  </li>
</ul>

new OpenRec(document.getElementById("container"), "open");

ものすごく説明がわかりづらいような…
使い方が全く分からんとかこういう構造だと動かないとか早く働けデブとか何かあったらコメント下さい。僕はこれからタウンワークもらってきてアルバイトを探します。