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 相关文章推荐
document.createElement()用法
Mar 13 Javascript
有关于JS构造函数的重载和工厂方法
Apr 07 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
Jun 26 Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
Nov 17 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
搭建element-ui的Vue前端工程操作实例
Feb 23 Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
Aug 07 Javascript
详解Vue.js 响应接口
Jul 04 Javascript
微信小程序实现签到弹窗动画
Sep 21 Javascript
js canvas实现俄罗斯方块
Oct 11 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
一个颜色轮换的简单例子
2006/10/09 PHP
供参考的 php 学习提高路线分享
2011/10/23 PHP
关于PHP的curl开启问题探讨
2014/04/08 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
JS 判断代码全收集
2009/04/28 Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
jQuery参数列表集合
2011/04/06 Javascript
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
js获取隐藏元素的宽高
2017/02/24 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
2017/06/13 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
webpack4 css打包压缩问题的解决
2018/05/18 Javascript
微信小程序如何利用getCurrentPages进行页面传值
2019/07/01 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
[01:10:58]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
Python爬虫入门有哪些基础知识点
2020/06/02 Python
python如何实现word批量转HTML
2020/09/30 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
摩托车和ATV零件、配件和服装的首选在线零售商:MotoSport
2017/12/22 全球购物
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
教育学专业实习生的自我鉴定
2013/11/26 职场文书
学校门卫管理制度
2014/01/30 职场文书
信息管理专业自荐书
2014/06/05 职场文书
环保公益策划方案
2014/08/15 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
小程序实现文字循环滚动动画
2021/06/14 Javascript