滑动菜单时隐藏图像的问题

发布于 2024-11-27 17:21:53 字数 289 浏览 1 评论 0原文

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

用户单击菜单区域，菜单将打开，并且带有十字的图像变得可见。要关闭按钮，用户单击图像，该图像就会变得不可见。

我在这一步遇到了问题。

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

注意：由于图像，请在 Chrome 或 IE 中看到此小提琴

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

伏妖词 2024-12-04 17:21:53

问题是 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');
});

这是一个工作示例。

The problem is that the img is contained within the #menuText element. That means when you click the img element, the click event handler for #menuText is also fired, and when that runs, it fades the img back in.

You can prevent that by adding an argument to the img click event handler, and calling stopPropagation to prevent the event from bubbling up:

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

Here's a working example.

回复收藏 0 原文