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 相关文章推荐
不要小看注释掉的JS 引起的安全问题
Dec 27 Javascript
jquery命令汇总,方便使用jquery的朋友
Jun 26 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
Mar 11 Javascript
JavaScript实现删除,移动和复制文件的方法
Aug 05 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
Dec 26 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
Node.js 实现远程桌面监控的方法步骤
Jul 02 Javascript
详解nvm管理多版本node踩坑
Jul 26 Javascript
javascript实现超好看的3D烟花特效
Jan 01 Javascript
react的hooks的用法详解
Oct 12 Javascript
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
Apr 13 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
超外差式晶体管收音机的组装与统调
2021/03/01 无线电
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
PHP实现从PostgreSQL数据库检索数据分页显示及根据条件查找数据示例
2018/06/09 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
PHP中的self关键字详解
2019/06/23 PHP
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
AngularJS创建一个上传照片的指令实例代码
2018/02/24 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
详解Typescript 内置的模块导入兼容方式
2020/05/31 Javascript
Javascript类型判断相关例题及解析
2020/08/26 Javascript
python根据文件大小打log日志
2014/10/09 Python
Python高级用法总结
2018/05/26 Python
解决pip install的时候报错timed out的问题
2018/06/12 Python
Django中使用Celery的方法示例
2018/11/29 Python
django数据关系一对多、多对多模型、自关联的建立
2019/07/24 Python
Django+uni-app实现数据通信中的请求跨域的示例代码
2019/10/12 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
Python字符串、列表、元组、字典、集合的补充实例详解
2019/12/20 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
Django models filter筛选条件详解
2020/03/16 Python
Python使用sys.exc_info()方法获取异常信息
2020/07/23 Python
python try...finally...的实现方法
2020/11/25 Python
CSS3制作苹果风格键盘特效
2015/02/26 HTML / CSS
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
2014年小学国庆节活动方案
2014/09/16 职场文书
工会工作个人总结
2015/03/03 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
禁毒主题班会教案
2015/08/14 职场文书
小学思想品德教学反思
2016/02/24 职场文书
Java各种比较对象的方式的对比总结
2021/06/20 Java/Android
Python数组变形的几种实现方法
2022/05/30 Python