javascript如何隐藏下拉菜单

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

javascript如何隐藏下拉菜单？

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

demo.html

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34







    

    

    

    

    

        
• 首页

        
• 课程大厅
  
              
  
  
                  
  • JavaScript
  
  
  
                  
  • Html/CSS
  
  
  
              
  
  
          

        
• 学习中心
  
              
  
  
                  
  • 视频学习
  
  
  
                  
  • 实例练习
  
  
  
                  
  • 问与答
  
  
  
              
  
  
   
  
          

        
• 经典案例

        
• 关于我们

 

    

 

 

demo.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

*{ 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;}

效果：