jQuery垂直下拉瓦特/淡入淡出

這有效。但是，再次單擊「＃pages-btn」不會關閉「＃instruct-pages」div。有沒有更好的方式來寫這個？謝謝您的幫助。jQuery垂直下拉瓦特/淡入淡出

這裏是一個小提琴來證明我的問題：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"); 
    } 
});

來源

2013-09-30 Smurfman82

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

demo

更新：

您將如何切換「click」的.options活動類？當您點擊容器外部時，它的工作原理爲，但如果您單擊實際按鈕，則不起作用。

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

demo

來源

2013-09-30 14:45:09 kei

這工作。謝謝。 :) – Smurfman82

你將如何切換「點擊」的.options活動類？它在您點擊容器外部時起作用，但如果您單擊實際按鈕則不起作用。再次感謝。 – Smurfman82

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

    } 

});

來源

2013-09-30 14:46:05 carter

這可以工作，但禁用點擊容器外部。謝謝。 :) – Smurfman82

您只需添加到您的鼠標鬆開功能：

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

來源

2013-09-30 14:49:24 Speedy

jQuery垂直下拉瓦特/淡入淡出

回答

相關問題