MS Access Tips/Sample and VBA and Blog customize etc...

カテゴリ別全記事一覧も jQueryで折りたたむ

タイトル画像

前回の記事、サイドメニュー折りたたみをjQueryで に引き続き、SiteMap のカテゴリ別タイトルリストも折りたたんでみました。

前回の記事のコードを改造してタイトルの前に折りたたみマークを表示させてそれをクリックすることによって折りたたんだり展開したりするようにしました。それに合わせて前回のサイドメニュー折りたたみのコードも変更しました。

折りたたみマークはとりあえずテキストですませました。


難易度:

FoldSiteMap.gif

javascriptコード

javascriptのコードは下記です。

開閉状態をクッキーに保存するとき、カテゴリ毎にキーを作成して保存すると、キー数の制限を超えてしまいそうなので、一つのキーに閉じているカテゴリ番号を区切り文字で連結して保存するようにしました。そのための関数が、ExsistCookie、AddCookie、RemoveCookie です。クッキー読み書き関数の ReadCookie、WriteCookie、DeleteCookie に関しては前回の記事を参照ください。

FoldList はサイドメニュー折りたたみ用のコードで前回のものの改良版です。FoldTitleListがカテゴリ別タイトルリスト折りたたみ用の関数です。折りたたみ時には「◇」、展開時には「⊿」がカテゴリ名の前に表示されるようにしました。

HTMLコード

HTMLの折りたたみたいリストのコード例は下記のようになります。

当ブログのFC2テンプレートのtitlelist_area のHTMLコードは下記のようになりました。

追記09/08/10: FireFox でJavaScriptオフのとき、レイアウトが崩れる場合があり、その対処のために上記のコードの一部を修正しました。変更箇所の詳細は、カテゴリ別全記事一覧ページを作る を参照ください。

CSSコード

テンプレートのCSSに下記のコードを追加しました。


拍手する

1 Comments

Hiro says..."便利になりました。"

こんばんは。
とても参考になりました。使わせて頂きます。

合わせて、リンクも貼らせて頂きました。
よろしくお願い致します。

2010.03.14 00:10 | URL | #27Yb112I [edit]

Leave a reply






該当の記事は見つかりませんでした。