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