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

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

感谢。

Answer 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');
});

Answer 2

我只是想着它，如果这个人最终工作，我将删除我的另一个答案......

你可能只能stopPropagation()关于mouseup事件，用div.stickies-box替换你当前拥有的事件：

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

Answer 3

见 -

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

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

jQuery Slide切换帮助

3 个答案: