2012上下に展開・格納するナビ拙サイトのナビを上下に展開・格納するようにしたいと思い色々物色。jQueryデザイン入門』p.244〜p.245の「サンプル1」に応用できそうなjQueryを見つけ拝借。});});これを元に、クリック時の動作用に変更。アニメーションをつけたい。クリックする箇所が、展開・格納で文字色が変わるように。上述動作が2箇所で交互に動作するように。なるように改造していく。1.クリック時の動作用に変更〜2.自分が後で理解しやすいようにする「hover」を「click」に変更。clickするごとに展開・格納させるので、slideDown()、slideUp()はslideToggle()にまとめて条件式の1つを削除。「this」の意味が良く分かってないので現段階で取っちゃう(後で、冗長的になるけど、これがなくても良い書き方にする)。アニメーションをつけたい今まさに必要なコラムを発見。「jQueryのslideDown/slideUp/fadeIn/fadeOutメソッドの正体」slideDown/slideUpメソッドはheightプロパティを、fadeIn/fadeOutメソッドはopacityプロパティを、書き換えることにより実装します。jQueryは、これらのプロパティを書き換えるのに、animateメソッドを使用しています。slideDown/slideUp/fadeIn/fadeOutの正体は、animateだったのです。fadeToggle(未サポート)これで、slideToggle()をanimate()に差替え出来て、animate()のeasingが使えるように。以上、1〜3までを踏まえた結果。});});4.クリックする箇所が、展開・格納で文字色が変わるように新たにtoggleClass("色指定用CSSクラス名")を使って、新たに色指定用CSSクラスが要素に無ければ追加し、あれば削除することで文字色を変更する。});});5.上述動作が2箇所で交互に動作するようにさてここでヒジョ〜に悩む。する要素名orクラス名orID名」や「クリックする要素名orクラス名orID名」では判りにくいので以下のようにした。「展開・格納する要素名orクラス名orID名」は2つなので、各々ID名「#subnavi01」「#subnavi02」とする。「クリックする要素名orクラス名orID名」も2つなので、各々ID名「#click01」「#click02」とする。});});要は上記青い部分。「#click01」をクリックした時、「#subnavi01」は展開・格納し「#subnavi02」は必ず閉じている状態且つ元の文字色にしたいので。元の文字色にするのはremoveClass("色指定用CSSクラス名")で色指定用CSSクラスを削除することで対応。「#click02」をクリックした時は上記赤い部分で同じように作動する。結局4はやめてしまった(つまりはtoggleClass()とremoveClass()の行は削除)。hover時の色変え設定と当たってしまって上手く動作せず、hover時の色変えを優先したので。それから、easingは一寸ギミックちっくなモノを選んでみた。どのように動作するかは、拙サイトをご覧あれ。