jquery - jQuery 押し出し引き出し: クリックは機能します (ちょっと)、ホバーはどうですか?

Question

私はいくつかの jQuery 押し出し引き出しを作成しています。これは、クリックまたはホバー イベントがトリガーされたときに展開される折りたたまれた div の私の名前です。これは、実際にはより大きなメニュー システムの一部です。とにかく、2 つの a 要素があり、1 つをクリックすると、引き出しが開き、その中にいくつかのコンテンツが表示されます。私は現在、一度クリックすると開き、2 回目のクリックで閉じるように設定しています。ただし、そのすぐ隣に基本的に同じことをする別のリンクがあるので、それらの間を切り替えるときに引き出しを開いたままにしておきたい. 現在、最初のリンクをクリックして開き、2 番目のリンクをクリックしてコンテンツを切り替え、いずれかのリンクをもう一度クリックすると、ドロワーが閉じます。これはおそらくあまり意味がないので、いくつかのコードを見てください。

実際の JavaScript は次のとおりです。

$(function () {
    $('a.drawercontrol').click(function (e) {
        e.preventDefault();
        var dindex = $(this).data("index");
        $('.drawer').removeClass('active');
        $("div[data-target='" + dindex + "']").addClass('active');
        if ($('#drawerarea').hasClass('closed')) {
            $('#drawerarea').toggleClass('closed');
            //$("div[data-target='" + dindex + "']").addClass('pop');
        }
        if ($("div[data-target='" + dindex + "']").hasClass('pop')) {
            $('#drawerarea').toggleClass('closed');
            $('.drawer').removeClass('pop');
        } else {
            $("div[data-target='" + dindex + "']").addClass('pop');
        }
    });
});

基本的な HTML フレームワークは次のとおりです。

<div id="topbox">
    <a href="#" class="drawercontrol" data-index="1">Drawer One</a>
     <a href="#" class="drawercontrol" data-index="2">Drawer Two</a>
</div>
<div id="drawerarea" class="closed">
    <div class="drawer active" data-target="1">Drawer One is Active</div>
    <div class="drawer" data-target="2">Drawer Two is Active</div>
</div>
<div id="bottombox"></div>

CSS:

#topbox {
    width: 500px;
    height: 100px;
    background-color: aqua;
}
#topbox a {
    margin: 10px;
}
#drawerarea {
    width: 500px;
    height: 150px;
    background-color: orange;
    overflow: hidden;
}
#drawerarea.closed {
    height: 0px;
}
.drawer {
    display: none;
}
.drawer.active {
    display: block;
}
#bottombox {
    width: 500px;
    height: 200px;
    background-color: red;
}

オールインワン: http://jsfiddle.net/HbA8f/2/

JavaScript に 1 行コメントがあり、これでクリック機能が改善されると思いましたが、何らかの理由でドロワーがまったく機能しません。

ここでクリック機能を改善し、できるだけユーザーフレンドリーにする方法について誰かがアイデアを持っているなら、それは素晴らしいことです.

また、クライアントはホバー機能も必要としています。誰かがそれについて何か考えを持っているなら、それも素晴らしいでしょう。