javascript隐藏下拉菜单的方法：首先创建一个“demo.html”和“demo.css”；然后创建一个“demo.js”；最后通过“function hideSubMenu(li) {...}”实现隐藏即可。

本文操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

javascript如何隐藏下拉菜单？

javascript实现下拉菜单的显示与隐藏

demo.html

html>


    <meta>
    <title>实现下拉菜单效果</title>
    <link>
    <script></script><p>
    </p>

        
• 首页
        
• 课程大厅             
                  
  • JavaScript
                  
  • Html/CSS
              
          
        
• 学习中心             
                  
  • 视频学习
                  
  • 实例练习
                  
  • 问与答
              
          
        
• 经典案例
        
• 关于我们
    

demo.js

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

function displaySubMenu(li) {

    var subMenu = li.getElementsByTagName("ul")[0];

    subMenu.style.display = "block";

}

function hideSubMenu(li) {

    var subMenu = li.getElementsByTagName("ul")[0];

    subMenu.style.display = "none";

}

demo.css

*{ margin:0px; padding:0px;}
body{ font-family:Verdana, Geneva, sans-serif; font-size:14px;}
#nav{ width:600px; height:40px; background-color:#eee; margin:0 auto;}
ul{ list-style:none;}
ul li{ float:left; line-height:40px; text-align:center; width:100px;}

a{ text-decoration:none; color:#000; display:block;}
a:hover{ color:#F00; background-color:#666;}



ul li ul li{ float:none;background-color:#eee; margin:2px 0px;}

ul li ul{ display:none;}

效果：

 推荐学习：《javascript高级教程》

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南