js实现点击向下展开的下拉菜单效果代码


Posted in Javascript onSeptember 01, 2015

本文实例讲述了js实现点击向下展开的下拉菜单效果代码。分享给大家供大家参考。具体如下:

这里介绍js实现点击向下展开的下拉菜单特效代码,无调用jQuery,真正的JS下拉菜单,兼容性方面未做测试,觉得有用处的自己测试修正吧,本文仅提供基础的代码供参考。

运行效果截图如下:

js实现点击向下展开的下拉菜单效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉菜单</title>
<style type="text/css">
*{margin:0; padding:0}
#nav{width:200px; margin:50px}
#nav h3{ cursor:pointer; line-height:30px; height:30px; background-color:#000000; color:#fff}
#nav a{display:block; line-height:24px;color:#666666}
#nav a:hover{background-color:#eee; color:#000;}
#nav div{display:none; border:1px solid #000; border-top:none}
</style>
<script type="text/javascript">
function $(id){return document.getElementById(id)}
window.onload = function(){
 $("nav").onclick = function(e){
 var src = e?e.target:event.srcElement;
 if(src.tagName == "H3"){
  var next = src.nextElementSibling || src.nextSibling;
  next.style.display = (next.style.display =="block")?"none":"block";
 }
 }
}
</script>
</head>
<body>
<div id="nav">
 <h3>管理区</h3>
  <div>
   <a href="#">建议</a>
    <a href="#">链接</a>
    <a href="#">联系</a>
  </div>
  <h3>交流区</h3>
  <div>
   <a href="#">JavaScript</a>
    <a href="#">Delphi</a>
    <a href="#">VC++</a>
  </div>
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jQuery Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
JS获取整个页面文档的实现代码
Dec 15 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 Javascript
用js实现小球的自由移动代码
Apr 22 Javascript
JavaScript实现的日期控件具体代码
Nov 18 Javascript
javascript实现瀑布流动态加载图片原理
Aug 12 Javascript
AngularJs Modules详解及示例代码
Sep 01 Javascript
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
Dec 01 Javascript
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
Vue 中可以定义组件模版的几种方式
Aug 06 Javascript
JS异步堆栈追踪之为什么await胜过Promise
Apr 28 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 #Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 #Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 #Javascript
JS实现黑客帝国文字下落效果
Sep 01 #Javascript
JavaScript中this详解
Sep 01 #Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 #Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 #Javascript
You might like
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
一个颜色轮换的简单例子
2006/10/09 PHP
mysql中存储过程、函数的一些问题
2007/02/14 PHP
php中inlcude()性能对比详解
2012/09/16 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
一个用js实现的页内搜索代码
2007/05/23 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
React-Native 组件之 Modal的使用详解
2017/08/08 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
Express下采用bcryptjs进行密码加密的方法
2018/02/07 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
JS函数进阶之继承用法实例分析
2020/01/15 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
[01:35:53]完美世界DOTA2联赛PWL S3 Magma vs GXR 第二场 12.13
2020/12/17 DOTA
Python彩色化Linux的命令行终端界面的代码实例分享
2016/07/02 Python
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
python 用for循环实现1~n求和的实例
2019/02/01 Python
python实现代码统计程序
2019/09/19 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
副职竞争上岗演讲稿
2014/05/12 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
四大名著读书笔记
2015/06/25 职场文书
新农村建设指导员工作总结
2015/08/13 职场文书
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python
Golang的继承模拟实例
2021/06/30 Golang
TypeScript 使用 Tuple Union 声明函数重载
2022/04/07 Javascript