jQuery 幻灯片切换帮助答案

【问题标题】：jQuery Slide Toggle helpjQuery 幻灯片切换帮助
【发布时间】：2010-07-22 19:32:29
【问题描述】：

我有以下代码：

$("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，然后当他们单击页面上的任何其他位置时隐藏它。我遇到的问题是，如果该框已经显示并且用户再次单击该按钮（假设他们打算隐藏该框），它只会快速隐藏并重新显示该框，而我只想隐藏该框。

除了滑动之外，还可以将效果更改为实际上下移动，因为滑动效果看起来更像是擦拭。

谢谢。

【问题讨论】：

标签： jquery

【解决方案1】：

主要问题是您的 mouseup 事件将在<a> 上的单击事件之前触发。

在隐藏框之前，您可以检测到 a.sticky-link 或 div.stickies-box 上没有发生 mouseup 事件：

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

【讨论】：

代码比我想要的多一点，但非常感谢。关于替代效果的任何想法，以便盒子向上移动而不是擦拭效果？
假设一个绝对定位的盒子，你可以使用 .animate() 改变它的“顶部”，将它从屏幕上推出，如果这就是你的意思。
刚刚发现一个问题。我必须单击按钮才能关闭该框，如果用户单击页面上的其他任何位置，我也希望它隐藏。

【解决方案2】：

我只是在考虑它，如果这个答案最终起作用，我将删除我的另一个答案......

您也许可以在 mouseup 事件中只使用 stopPropagation()，将您当前拥有的 div.stickies-box 替换为：

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

【讨论】：

原来你的原始代码工作正常，但在某些页面上不工作，不知道为什么。但是，如果您认为自己有更好的解决方案，请随时更新您的答案，谢谢。

【解决方案3】：

见-

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

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

【讨论】：