Question

我是一位超长时间的读者，但在这里几乎没有发表评论。我每隔一段时间就有一个问题，在我不得不提出任何问题之前，我已经能够找到答案了。我试着善于不懒惰。

无论如何，我最近一直在教自己更多的jQuery，我遇到了一个我不能只搜索的问题。需要比我更有教养的眼睛。请注意，这与Internet Exploder尚未完全兼容（另一个线程的对话）

我将鼠标滚动绑定到一个向上＆amp;从底部对窗帘产生影响。它适用于我的目的。向下滚动，主要内容显示。向上滚动，欢迎屏幕显示。

除此之外：不要尝试在移动分辨率中打开它...我还没有完成设置。可以说，不会有一堆层飞来飞去。

所以我有两个主要功能来提升和降低百叶窗。

showit（） hideit（）

// Function to show #main-content in standard resolution
function showit() {
    if ($('#main-content').hasClass('hideit')) {
        $('#main-content').removeClass('hideit').addClass('showit');
        $('#wrap').removeClass('cursor');
        $('#main-content').stop().animate({
            height: '+=' + realheight,
            opacity: 0.7
        });
        $('#welcome').stop().animate({
            opacity: 0,
            top: '-=10'
        }, 600).delay(400).animate({
            top: midpoint
        }, 100);
    }
}

// Function to hide #main-content in standard resolution
function hideit() {
    if ($('#main-content').hasClass('showit')) {
        $('#main-content').removeClass('showit').addClass('hideit');
        $('#wrap').addClass('cursor');
        $('#main-content').stop().animate({
            height: '-=' + realheight,
            opacity: 0
        });
        $('#welcome').stop().animate({
            opacity: 1,
            top: '+=10'
        }, 600);
    }
}

当鼠标滚动调用hideit（）时，窗帘完美地落下。

当我点击红色“X”来调用hideit（） - 主要内容窗帘的右上角时 - 它无法正常执行。它不再落下，而是会再次出现。

希望有人在这里帮助解释一下。我的智慧结束了。

Answer 1

你的问题是传播。 .closeit按钮位于#wrap内。这意味着当您单击红色X时，hideit函数将正确运行，但点击事件将传播并最终到达#wrap，这也将处理它，运行showit - 结果在你看到的奇怪效果中。

您需要使用关闭按钮的事件处理程序中的event.stopPropagation()方法停止传播，如下所示：

// Activate the close button
$(".closeit").click(function (e) {
    hideit();
    e.stopPropagation();
});

Fixed Fiddle（也解除了移动设备的攻击，所以我可以正确查看）

绑定到鼠标时jQuery操作有效，但绑定到单击时则不行

1 个答案: