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
javascript实现下拉菜单的显示与隐藏的更多相关文章
- (JavaScript插件——下拉菜单)
前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.html 本文主要来学习一下JavaScrip ...
- bootstrap 下拉菜单不显示的解决办法
bootstrap 下拉菜单不显示,最后改成如下正常显示: <div class="btn-group open"> <ul class="dropdo ...
- javascript 横向下拉菜单演示
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"><head><me ...
- BootStrap字体图标不显示、下拉菜单不显示
在W3CSchool学习BootStrap教程时遇到的问题…… 1.字体图标不能显示 上面是正常显示的样子,不能正常显示,因为缺少下面的字体图标样式文件 (1)在下载的Bootstrap包中将font ...
- 一款多浏览器兼容的javascript多级下拉菜单
这个多级下拉菜单的脚本大小不到2K,带有动画效果,可以方便地支持多个实例,并且能良好兼容WordPress系统wp_list_cats和wp_list_pages生成的多级列表.要初始化一个菜单,只需 ...
- css中overflow:hidden的属性 可能会导致js下拉菜单无法显示
css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...
- Bootstrap3.0学习第十八轮(JavaScript插件——下拉菜单)
详情请查看 http://aehyok.com/Blog/Detail/25.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:h ...
- javascript简易下拉菜单效果
JS代码: window.onload=function(){ var oDiv=document.getElementById('navMenu'); var aUl=oDiv.getElement ...
- layui 单选框、复选框、下拉菜单 不显示问题 记录
1. 如果是 ajax嵌套了 页面, 请确保 只有最外层的页面引入了 layui.css 和 layui.js 内层页面 切记不要再次引入 2. layui.use(['form', 'upload ...
随机推荐
- BZOJ 2286: [Sdoi2011]消耗战 虚树
Description 在一场战争中,战场由n个岛屿和n-1个桥梁组成,保证每两个岛屿间有且仅有一条路径可达.现在,我军已经侦查到敌军的总部在编号为1的岛屿,而且他们已经没有足够多的能源维系战斗,我军 ...
- vue 3.0 vue-cli项目搭建要点
一.使用vue-cli搭建项目(可使用vue ui图形化界面搭建项目,配置dist时,将名称设为项目名称) 二.项目搭建后 1.配置vue.config.js // 翻阅文档https://cli.v ...
- 《数据结构与算法(C语言版)》严蔚敏 | 第五章 建立二叉树,并完成三/四种遍历算法
PS:所有的代码示例使用的都是这个图 2019-10-29 利用p126的算法5.3建立二叉树,并完成三种遍历算法 中序 后序 先序 #include<iostream> #include ...
- [CSP-S模拟测试]:Silhouette(数学)
题目描述 有一个$n\times n$的网格,在每个格子上堆叠了一些边长为$1$的立方体. 现在给出这个三维几何体的正视图和左视图,求有多少种与之符合的堆叠立方体的方案.两种方案被认为是不同的,当且仅 ...
- 关于Spring中BeanUtils的一次使用问题记录
1.问题描述:今天在进行前后端联调的时候,发现商品图片不能正常显示: 2.排查过程:查看浏览器控制台,发现调用接口返回的数据关于图片的字段未返回数据: 然后,又跑了一下Dao层的单元测试,从 ...
- iOS打印各种类型数据
整型占位符说明 : %d : 十进制整数, 正数无符号, 负数有 “-” 符号; %o : 八进制无符号整数, 没有 0 前缀; %x : 十六进制无符号整数, 没有 0x 前缀; %u : 十进制无 ...
- QT_study
https://blog.csdn.net/a313827758/article/details/72736552 https://blog.csdn.net/xbcreal/article/deta ...
- Js DOM 修改 css Style
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- grpc应用于微服务的分析,基于python
grpc应用于微服务的分析 gRPC 是一个高性能.开源和通用的 RPC 框架,面向移动和 HTTP/2 设计,目前提供 C.Java 和 Go 语言版本,分别是:grpc, grpc-java, g ...
- (appium+python)UI自动化_10_adb常用命令
前言 adb(Android Debug Bridge)工具是android-sdk里的一个工具,是一个命令行窗口,用于通过电脑端与模拟器或者真实设备交互.在app自动化测试过程中,有时要用到adb命 ...