jquery - フェード付きjQuery垂直ドロップダウン

Question

これは機能します。ただし、「#pages-btn」をもう一度クリックしても、「#instruct-pages」div は閉じません。これを書く良い方法はありますか？助けてくれてありがとう。

ここに私の問題を示すフィドルがあります: http://jsfiddle.net/PCzfs/1/

$("#pages-btn").click(function () {
    $("#instruct-pages").fadeToggle();
    $(this).addClass("options-active");
});
$(document).mouseup(function (e) {
    var container = $("#instruct-pages");
    if (!container.is(e.target)
        && container.has(e.target).length === 0)
    {
        container.fadeOut();
        $("#pages-btn").removeClass("options-active");
    }
});

Answer 1

var $instructPages = $("#instruct-pages");
$instructPages.is(":visible") ? $instructPages.fadeOut() : $instructPages.fadeIn();

デモ

---

更新日:

「クリック」の .options-active クラスをどのように切り替えますか? コンテナの外側をクリックすると機能しますが、実際のボタンをクリックすると機能しません。

var $instructPages = $("#instruct-pages");
if ($instructPages.is(":visible"))
{
    $instructPages.fadeOut();
    $(this).removeClass("options-active");
}
else
{
    $instructPages.fadeIn();
    $(this).addClass("options-active");
}

デモ

Answer 2

http://jsfiddle.net/PCzfs/2/

$("#pages-btn").click(function (e) {
     var container = $("#instruct-pages");
    container.fadeToggle();        

    if (!container.is(e.target) && container.has(e.target).length === 0){
        if($(this).hasClass('options-active')){
            $("#pages-btn").removeClass("options-active");    
        }else{
            $("#pages-btn").addClass("options-active");
        }   

    }

});

Answer 3

これを mouseup 関数に追加するだけです：

e.target.id!=="pages-btn"