jQuery带淡入淡出的垂直下拉列表

这很有效。但是，再次单击“#pages btn”不会关闭“#Instruction pages”分区。是否有更好的方法编写此分区？谢谢你的帮助

这里有一把小提琴来演示我的问题：

---

已更新：

---

您将如何为“单击”切换.options活动类？它起作用了 当您在容器外部单击但如果单击 实际按钮

---

您可以将其添加到mouseup函数中：

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

---

这可以工作，但禁止在容器外部单击。谢谢。：）您将如何为“单击”切换.options活动类？当您在容器外部单击时，它会工作，但如果您单击实际按钮，则不会工作。再次感谢。

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

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

$("#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");
        }   

    }

});

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