首頁 > web前端 > js教程 > javascript如何隱藏下拉式選單

javascript如何隱藏下拉式選單

藏色散人
發布: 2021-07-05 14:54:10
原創
3073 人瀏覽過

javascript隱藏下拉式選單的方法:先建立一個「demo.html」和「demo.css」;然後建立一個「demo.js」;最後透過「function hideSubMenu(li) {...} ”實現隱藏即可。

javascript如何隱藏下拉式選單

本文操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>实现下拉菜单效果</title>

    <link rel="stylesheet" type="text/css" href="demo.css">

    <script type="text/javascript" src="demo.js"></script>

</head>

<body>

<p id="nav">

    <ul>

        <li><a href="#">首页</a></li>

        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">课程大厅</a>

            <ul>

                <li><a href="#">JavaScript</a></li>

                <li><a href="#">Html/CSS</a></li>

            </ul>

        </li>

        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">学习中心</a>

            <ul>

                <li><a href="#">视频学习</a></li>

                <li><a href="#">实例练习</a></li>

                <li><a href="#">问与答</a></li>

            </ul>

 

        </li>

        <li><a href="#">经典案例</a></li>

        <li><a href="#">关于我们</a></li>

 

    </ul>

 

</p>

</body>

</html>

登入後複製

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

登入後複製

效果:

 推薦學習:《javascript進階教學

以上是javascript如何隱藏下拉式選單的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板