javascript - CSS 下拉框菜单关闭的定时延迟？

Question

我的网站有一个管理区域，用户需要在其中查看通知。

我用 CSS 下拉菜单设置了整个通知想法，但我似乎无法让菜单在光标离开菜单后保持打开状态

我已经把文件上传到JSbin了，希望有人能帮帮我

http://jsbin.com/ecegiy/1

它看起来并不多，因为所有图像和 mysql 连接文件都不包括在内，但链接中包含 css 菜单创意。

Answer 1

好的，如果你想让菜单保持打开状态，我建议:

• 删除hover on sub-menu的css部分
  #menu li:hover ul.sub-menu { display: block; }
• 给你的菜单一个id
  <ul id="childDisplay" class="sub-menu">
• 将javascript添加到始终可见的上层元素
  <li onmouseover="menuVis.visible('childDisplay');" onmouseout="setTimeout('menuVis.unvisible(\'childDisplay\')',1000);">

• 添加 javascript 类和方法:

  function vis(){
      this.flag=0;
      this.flagUnv=0;
  
      this.visible=function(x){
        this.flag=this.flag+1;
        document.getElementById(x).style.display="block";
  
      }
  
  
      this.unvisible= function (x){
            this.flagUnv=this.flagUnv+1;
            if(this.flagUnv==this.flag)
                 document.getElementById(x).style.display="none";    
          }
  }
  menuVis=new vis();
  }
  

有了这个，子菜单将在 1000 毫秒后变得不可见。如果你想让它“永远”可见，只需删除 onmouseout 部分和不可见功能。