집 >웹 프론트엔드 >JS 튜토리얼 >자바스크립트에서 드롭다운 메뉴를 숨기는 방법

자바스크립트에서 드롭다운 메뉴를 숨기는 방법

藏色散人원래의: 2021-07-05 14:54:102924검색

JavaScript에서 드롭다운 메뉴를 숨기는 방법: 먼저 "demo.html" 및 "demo.css"를 만든 다음 "demo.js"를 만들고 마지막으로 "function hideSubMenu(li) {.. .}" 할 수 있다.

이 문서의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

자바스크립트로 드롭다운 메뉴를 숨기는 방법은 무엇입니까?

Javascript는 드롭다운 메뉴의 표시 및 숨기기를 구현합니다.

demo.html

<!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

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 고급 튜토리얼 "

위 내용은 자바스크립트에서 드롭다운 메뉴를 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript css html JS function li

성명：

이전 기사：jquery를 사용하여 CSS 스타일을 동적으로 수정하는 방법다음 기사：jquery를 사용하여 CSS 스타일을 동적으로 수정하는 방법