jQuery的幻燈片切換幫助

Question

我有以下代碼：

$("a.sticky-link").click(function (e) { 
     e.preventDefault(); 

     $("div.stickies-box").slideToggle('slow'); 
     $("a.sticky-link").toggleClass("selected"); 
    }); 

    $("div.stickies-box").mouseup(function() { 
     return false 
    }); 
    $(document).mouseup(function (e) { 
     if ($(e.target).parent("a.sticky-link").length == 0) { 
      $("a.sticky-link").removeClass("selected"); 
      $("div.stickies-box").slideUp('slow'); 
     } 
    }); 

這基本上顯示和隱藏，當用戶點擊一個按鈕一個div，然後隱藏它應該，他們可以點擊其他地方在頁面上。我遇到的問題是，如果該框已顯示，並且用戶再次單擊該按鈕（假設他們打算隱藏該框），則只需快速隱藏並重新顯示該框，當我想要的時候就隱藏框。

而不是滑動可以將效果改變爲實際上下移動，因爲滑動效果看起來更像是擦拭。

謝謝。

Answer 1

的主要問題是，你的鼠標鬆開事件將在<a> click事件之前進行發射。

您可以檢測到您的鼠標鬆開事件不存在的對a.sticky-link或div.stickies-box躲藏在箱子前：

$("a.sticky-link").click(function (e) { 
    e.preventDefault(); 

    $("div.stickies-box").slideToggle('slow'); 
    $("a.sticky-link").toggleClass("selected"); 
}); 

$(document).mouseup(function (e) { 
    var $targ = $(e.target); 
    // if we are the link or the box, exit early 
    if ($targ.is('a.sticky-link') || $targ.is('div.stickies-box')) return; 
    // if we have a parent who is either, also exit early 
    if ($targ.closest('a.sticky-link,div.stickies-box').length) return; 

    // hide the box, unselect the link 
    $("a.sticky-link").removeClass("selected"); 
    $("div.stickies-box").slideUp('slow'); 
}); 

Answer 2

見式

http://api.jquery.com/slideToggle/

http://api.jquery.com/toggle/

Answer 3

我只是在想這件事，並會刪除我的其他答案，如果這一個結束了工作......

你也許能夠只stopPropagation()在鼠標鬆開事件，請更換您目前有div.stickies-box與此一：

$("div.stickies-box,a.sticky-link").mouseup(function (e) { 
    e.stopPropagation(); 
});