アコーディオンメニュー

javascript jquery

一応本音を言えば面倒だったので例題をコピーしたんですが、、、、
うーん。。。ちょっと出来が悪すぎない？ってことで手を入れてみました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/style.css">
<script src="../js/jquery-1.7.2.min.js"></script>
<script>
$(function(){
    $("dd:not(:first)").css("display","none");
    $("dl dt").click(function(){
        if($("+dd",this).css("display")=="none"){
            $("dd").slideUp("slow");
            $("+dd",this).slideDown("slow");
        }else{
            $("dd").slideUp("slow",function(){
              $("+dd",this).slideDown("slow");
			});
		}
    });
});

</script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
<body>

<dl>
    <dt>テキスト1</dt>
    <dd>
    <p>テキスト１本文</p>
    </dd>
    <dt>テキスト2</dt>
    <dd>
    <p>テキスト２本文</p>
    </dd>
    <dt>テキスト3</dt>
    <dd>
    <p>テキスト３本文</p>
    </dd>
</dl>
	
</body>
</html>


まあ、認識の違いはあるにせよアコーディオンメニューもそうだけど、
少ない面積で多くの情報を見せることが目的のはず。
それは先生もおっしゃっていた通り、しかも先生の例題であればキレイなのに、
このサイトのはいくらなんでも・・・・


一応選択したメニュー以外はすべて閉じるように変更しています。
ちょっと苦労してしまったのはメニューの開閉タイミング。


今後、絶対にハマるjQuery最大のウィークポイントだと思っている「タイミングバグ」。
今回まさにそれに引っかかる事象が出てきました。


まず、回避の第一歩はcollback関数という認識を持つこと。
これが持てないとかなり厳しい。


逆にこれがわかればあとは処理を追うだけ。
タイミングはこれが解決してるはず！


まあ、それでもダメなときはダメなんですが。。。
見た目にこだわって今回のようなゆっくりした動きを作るとより多くバグは発生します！