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

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

　　效果：

2017-09-0 6 2017-09-06

时间： 2024-08-08 13:02:33

javascript实现下拉菜单的显示与隐藏的相关文章

jQuery --下拉菜单的显示与隐藏

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <style type="text/css"> 8 *{ 9 margin: 0px; 10 padding: 0px; 11 } 12 #nav{ 13 background-color: #EEE; 14 width

1.鼠标点击换样式 <style type="text/css"> .aa{ width:90px; height:60px;text-align:center; vertical-align:middle; line-height:60px; margin-right:10px; font-size:19px; float:left; background-color:#06F} </style> <body> <div style=&quo

javascript 横向下拉菜单演示

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>css横向下拉菜单演示</title><style type="text/c

解决下拉菜单的显示问题

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>下拉菜单</title> <link rel="stylesheet" href="index.css&

javascript + css 下拉菜单 2.0版

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta http-equiv="Content-Type" content="

FrontEnd 步步高升:Dropdown,纯javascript实现下拉菜单

实现思路: 获取class="dropdown"的所有元素验证其data-toggle是否为dropdown 添加 onclick 事件在dropdown 上增加/删除 "open" class 判断open实现相应的toggle进行开/关目前只完成了: SimpleDropdown : 无动画效果, 通过修改display实现开/关 AccordionDropdown : 有上下移动的动画效果,通过修改heigh

Javascript实现下拉菜单

效果如下: 全部代码如下:

jQuery点击下拉菜单的展示与隐藏

首先点击显示某个div,然后要求再次点击时消失,或者点击document的其他地方会隐藏掉这个层,涉及到冒泡的问题,阻止document冒泡到dom上.代码如下: var $el = $(".search-more, .article-query-list li"); $el.click(function(e){ e.stopPropagation(); $(this).toggleClass('active'); }); $(document).on('click',function

js模拟下拉菜单-键盘、鼠标（代码详解）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con