js实现下拉菜单人性化体验

原创

dcj3sjt126com 2022-08-05 16:51:32 博主文章分类：Other ©著作权

文章标签 工作 javascript ViewUI ide html 文章分类 运维

©著作权归作者所有：来自51CTO博客作者dcj3sjt126com的原创作品，请联系作者获取转载授权，否则将追究法律责任

<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
  <style>
    * {margin:0; padding:0}
    body {width:800px; text-align:center; margin:0 auto;}
    a {width:100px; display:block; border:1px dashed red; text-decoration:none}
    ul,li { width:100px; margin:0; padding:0; list-style:none}
  </style>
</head>
<body > 
  <a href="#" οnmοuseοver="show()" οnmοuseοut="hide()">栏目菜单</a>
  <ul id="menu" style="display:none" οnmοuseοver="show()" οnmοuseοut="hideme()">
    <li><a href="#">菜单1</a><li>
    <li><a href="#">菜单2</a><li>
    <li><a href="#">菜单3</a><li>
    <li><a href="#">菜单4</a><li>
    <li><a href="#">菜单5</a><li>
  </ul>

  <script>
    var flag = false;  //值为false表示可以隐藏
    var menu = document.getElementById("menu");
    //鼠标放到栏目或菜单上面都显示，并且将flag标识为true
    function show(){
      flag=true;
      menu.style.display = 'block';
    }
    //离开栏目要验证一下是否可以隐藏，如果值为true则不隐藏
    function hide(){
      flag=false;
      setTimeout(function(){
        if(flag==false) {
          menu.style.display = 'none';
        }
      },300);
    }
    //离开菜单本身就直接隐藏
    function hideme() {
      menu.style.display = 'none';
    }
  </script>
</body>
</html>