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






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/155-96f41e61
トップメニュー見直し中

ずっと当サイトの”看板”としてきた ”Amazon の商品バー”を外しました。 くるくるウィジェット(TM),映画タイトルINDEX カテゴリも分類が多い...

2010.03.14 00:11 『映画な日々』 cinema-days
該当の記事は見つかりませんでした。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。