1

我是一个超级长期的读者，但在这里发表的评论很少。每次我有问题时，我都能够在我不得不真正提出任何问题之前寻找答案。我尽量不偷懒。

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

在这个小提琴中：http: //jsfiddle.net/29Aat/65/

我将鼠标滚动绑定到从底部到窗帘的上下效果。它足以满足我的目的。向下滚动，主要内容显示。向上滚动，欢迎屏幕显示。

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

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

显示（）隐藏（）

// 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() - 主要内容窗帘的右上角 - 它无法正确执行。幕布不但没有落下，反而再次升起。

希望这里有人能帮忙解释一下。我无计可施。

4

1 回答 1

1

你的问题是传播。按钮在.closeit里面#wrap。这意味着当您单击红色 X 时，该hideit函数将正确运行，但单击事件将传播并最终到达#wrap哪个也会处理它，运行showit- 导致您看到的奇怪效果。

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

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

固定小提琴（也解除了移动设备的武装，所以我可以正确查看）

于 2013-03-07T01:51:06.483 回答