javascript - jQuery アコーディオン | ページロード時に最初の要素を開く & アクティブ状態の混乱

Question

私は以下の Javascript を使用してアコーディオンをアニメーション化しています (これは、ここで説明されているもののわずかに変更されたバリアントです: http://tympanus.net/codrops/2010/04/26/elegant-accordion-with-jquery-and-css3/ .

ここで、最初の要素をページロード時に開くようにしたかったので、Javascript を介してある種の追加クラスを与えて (そして.activeCSS を介してその状態を定義して)、それを開くようにしました。

これは機能しましたが、first-element上記.activeのクラス以外にカーソルを合わせると、最初の要素はその状態を維持し、少なくとも 1 回カーソルを合わせるまで開いたままになります。

だから、私が欲しいのは、アコーディオンの最初の要素が開いていて、ユーザーが最初ではない要素のいずれかにカーソルを合わせると折りたたまれることです。最初の要素のクラスを取り除くか、新しい要素をアクティブな状態にするために関数に行を追加する必要があると思いますがhover、それを行う方法がわかりません。

<script type="text/javascript">
        jQuery(function() {

            activeItem = jQuery("#accordion li:first");
            jQuery(activeItem).addClass('active');

            jQuery('#accordion > li, #accordion > li.heading').hover(
                function () {
                    var jQuerythis = jQuery(this);
                    jQuerythis.stop().animate({'height':'280px'},500);
                    jQuery('.heading',jQuerythis).stop(true,true).fadeOut();
                    jQuery('.bgDescription',jQuerythis).stop(true,true).slideDown(500);
                    jQuery('.description',jQuerythis).stop(true,true).fadeIn();
                },

                function () {
                    var jQuerythis = jQuery(this);
                    jQuerythis.stop().animate({'height':'40px'},1000);
                    jQuery('.heading',jQuerythis).stop(true,true).fadeIn();
                    jQuery('.description',jQuerythis).stop(true,true).fadeOut(500);
                    jQuery('.bgDescription',jQuerythis).stop(true,true).slideUp(700);
                }
            );
        });
    </script>