document.onclick 关闭但在单击菜单时保持打开状态

Question

好的，我有这个下拉菜单脚本。当所有点击都发生在菜单本身时，它工作正常，但是当我点击菜单时，下拉菜单不会关闭。如果用户单击屏幕上不是实际菜单的某个位置，我希望菜单关闭。

我已尝试添加代码：

document.onclick = ddMenu_close;

但是这使得菜单永远不会打开，因为它通过函数调用“打开”，然后立即关闭它，因为它随后调用 onclick ddMenu_close。我的脚本如下：

<script type="text/javascript">
  function ddMenu() {
    var timeout    = 500;
    var closetimer = 0;
    var ddmenuitem = 0;

    function ddMenu_open(e)
    {
       ddMenu_close();
       var submenu = $(this).find('ul');
        if(submenu){
            ddmenuitem = submenu.css('visibility', 'visible');

        }

    }

    function ddMenu_close()
    {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden'); }

    function ddMenu_timer()
    { closetimer = window.setTimeout(ddMenu_close, timeout); }

    function ddMenu_canceltimer()
    {  if(closetimer)
       {  window.clearTimeout(closetimer);
          closetimer = null;}}

    $(document).ready(function()
    {  $('#ddMenu > li').bind('click', ddMenu_open);
       $('#ddMenu li ul').bind('click', ddMenu_timer);


    });


    }
    </script>

所以我需要在此脚本中添加一些内容，当单击文档或窗口时将关闭下拉菜单，但不会干扰单击菜单或下拉菜单。感谢您的帮助。

Answer 1

在ddMenu_open()中为$(document)绑定点击事件触发ddMenu_close()。 在ddMenu_close()中取消$(document)的点击事件。

这是一个例子：

http://jsfiddle.net/bEPvP/