带有淡入淡出的jQuery垂直下拉菜单答案

【问题标题】：jQuery Vertical Dropdown w/ Fade带有淡入淡出的jQuery垂直下拉菜单
【发布时间】：2013-10-06 11:29:45
【问题描述】：

这行得通。但是，再次单击“#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");
    }
});

【问题讨论】：

标签： jquery slide fade

【解决方案1】：

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

demo

更新：

您将如何切换 .options-active 类的“点击”？有用当您单击容器外部但单击实际按钮。

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

demo

【讨论】：

如何切换 .options-active 类的“点击”？它在您单击容器外部时起作用，但如果您单击实际按钮则不起作用。再次感谢。

【解决方案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");
        }   

    }

});

【讨论】：

这可行，但会禁用在容器外部单击。谢谢。 :)

【解决方案3】：

你可以把它添加到你的 mouseup 函数中：

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

【讨论】：