Question

我创建了一个按钮，我想要做的是当我将鼠标悬停时，一个菜单切换出动画。但是当我将光标移到菜单上时，菜单会切换回来，因为它现在读取光标不再悬停在按钮上。我尝试使用“e.preventDefault（）;”，它会停止菜单切换回来，但所有动画似乎都被取消了。

以下是代码：

$("#logoSmall").hover(function(){
        //e.preventDefault();
        $("#safety_nav").toggle(function(){


            $(this).animate({top: '40px', opacity:'1'}, function(){
                $(this).hover(function(){
                        //I don't know what to put here.
                    });
            });
        });

    });

请帮忙！我错过了什么？我在这做错了什么？

谢谢

Answer 1

根据jQuery's API documentaion，切换不能将函数作为第一个参数。您必须先指定一个持续时间：

$("#safety_nav").toggle(500, function(){...

Answer 2

由于这是家庭作业，我倾向于提供建议而不是代码： - ）

这不是计划的代码问题 - 按钮是弹出菜单的触发器，但是您需要测试鼠标是否超出菜单div或按钮。您正在寻找的行为更多的是UI策略，而不是单个答案。

你可以接近它的一种方法是将按钮绑定到悬停，但是重新隐藏div的测试是按钮上的鼠标NEITEER或#safety_nav。

此外，您可能希望添加一个行为，其中任何菜单激活取消激活其他菜单，并且用户在任何菜单div外部点击隐藏所有这些（作为回退行为，以防浏览器在报告鼠标过度/结束时不稳定条件下）

祝你好运！

Jquery帮助切换菜单

2 个答案: