Javascript jQuery自定义菜单

我找到的每个jQuery插件都基于生成菜单项的元素

我有一个元素，代表菜单按钮和另一个，不相关的maning它不是一个包含菜单项mixed stuff，images等的子元素。我希望当我点击按钮时，第二个隐藏的div出现。当我离开按钮或者当我离开content div时，它应该隐藏起来，以防我在那里选择项目或做事情

现在，这是我到目前为止的代码，但是clearTimeout似乎不起作用。有什么帮助吗？指出一个插件来帮助我的工作也可以

谢谢

        var timer;

        $('#menubutton').click(function() {
            $('#menucontent').show();
        });

        $('#menubutton').mouseout(function() {
            timer = setTimeout('$("#menucontent").hide()', 500);
        });


        $('#menucontent').mouseover(function() {
            clearTimeout(timer);
        }).mouseout(function() {
            setTimeout('$("#menucontent").hide()', 300);
        });

编辑解决方案

我用hover代替mouseover/mouseout解决了这个问题。试试这个：

    $('#menubutton').click(function() {
        $('#menucontent').show();
    });

    $('#menubutton').mouseout(function() {
        $(this).data('myTimer', setTimeout('$("#menucontent").hide()', 500));
    });

    $('#menucontent').mouseover(function() {
        clearTimeout($(this).data('myTimer'));
    }).mouseout(function() {
        setTimeout('$("#menucontent").hide()', 300);
    });

---

为什么要让按钮或内容分区保持工作状态？如果你被困在两个边界之间，狗屎就开始无缘无故地消失，那就太烦人了。一个或另一个，而不是两个。此脚本是否在错误控制台中引发任何错误？控制台上没有错误。顺便说一句，如果我打开一个菜单，不要穿过它，只需按另一个按钮，它就会保持打开状态。这就是标准菜单的工作方式，我觉得很有趣。在这种情况下，我建议添加一些调试视觉效果，这样您就可以准确地看到什么时候被调用，比如一个绿色的框，显示menubutton mouseout发生的时间，一个红色的框表示menucontent mouseover，一个蓝色的框表示menucontent mouseout，等等。有些事情并没有按照您预期的方式发生。。。