Question

我有一个带有slideUp和SlideDown的菜单。

用户在menuArea中单击，菜单打开，带有十字的图像变为可见。要关闭按钮，用户单击图像，该图像将变为不可见。

我在这一步中遇到了问题。

看看这个小提琴：http://jsfiddle.net/pedroR/7YNJY/3/

注意：由于图像

，请在Chrome或IE中查看此小提琴

由于

Answer 1

http://jsfiddle.net/7YNJY/12/在这里尝试一下。你可以将动画重新放入，但我只是将其缩小了一点以便于阅读。

Answer 2

问题是img包含在#menuText元素中。这意味着当您单击img元素时，#menuText的点击事件处理程序也会被触发，当它运行时，它会淡化img。

您可以通过向img点击事件处理程序添加参数并调用stopPropagation来阻止事件冒泡来阻止这种情况：

$('#menuArea #menuText img').click(function(e) {
    e.stopPropagation();
    $('#menuArea ul').delay(100).slideUp(250);
    $(this).stop(true, true).delay(100).animate({
        opacity: 0
    }, '100', 'linear');
});

这是working example。

Answer 3

看看这是否是您要查找的结果：http://jsfiddle.net/rkw79/7YNJY/13/

slideUp菜单时隐藏图像的问题

3 个答案: