dtタグをクリックすると隣接するddタグをスライドして開閉する方法(jQuery利用)+α


放置していたサイトをリニューアルしようとjQueryを勉強しています(プロバイダのサーバーで運用してたんですが、容量も少ないし、CGI動かすとなると別ドメインになるしとあまりよくないので、ここのドメインのサブドメインにして移転しようと思っています)。

というわけで今回はjQueryについて。用語や名前を意味するdtタグをクリックすると、その下のddタグを開閉させる方法についてです。まず、最初にページを開いた時にはddタグは閉じているものとします。

実行例

冬の次の季節
春の次の季節
夏の次の季節
秋の次の季節

終わり。

としたいところですが、これだけでは何なのでもう少し改良してみます。
 URIにアンカー(ハッシュ)があると、ページを開いた時にアンカーに対応するdtタグの下のddタグを開くというものです。

実行例

右手
お箸を持つ方の手
左手
お箸を持たない方の手

右手
多分これでうまくいくはず。

なぜかここでやったら、dtタグじゃなくて、ddタグのほうにページが遷移しました。なんでだろう・・・。

コメントを残す

メールアドレスが公開されることはありません。