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 相关文章推荐
javascript 实现父窗口引用弹出窗口的值的脚本
Aug 07 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
JavaScript获取图片的原始尺寸以宽度为例
May 04 Javascript
href下载文件根据id取url并下载
May 28 Javascript
js拼接html注意问题示例探讨
Jul 14 Javascript
freemarker判断对象是否为空的方法
Aug 13 Javascript
ClearTimeout消除闪动实例代码
Feb 29 Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
Dec 23 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
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
php和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
yii分页组件用法实例分析
2015/12/28 PHP
文本框的字数限制功能jquery插件
2009/11/24 Javascript
javascript写的日历类(基于pj)
2010/12/28 Javascript
纯文字版返回顶端的js代码
2013/08/01 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
jQuery插件实现文件上传功能(支持拖拽)
2020/08/27 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
React手稿之 React-Saga的详解
2018/11/12 Javascript
VUE简单的定时器实时刷新的实现方法
2019/01/20 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
python+Django实现防止SQL注入的办法
2019/10/31 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
巴黎欧莱雅法国官网:L’Oreal Paris
2019/04/30 全球购物
方正Java笔试题
2014/07/03 面试题
数控加工专业毕业生自荐信
2013/09/27 职场文书
小学教师节活动方案
2014/01/31 职场文书
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
分家协议书
2014/04/21 职场文书
单位租房协议范本
2014/12/03 职场文书
幼儿园中班教学反思
2016/03/03 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书
将Python代码打包成.exe可执行文件的完整步骤
2021/05/12 Python
Python一些基本的图像操作和处理总结
2021/06/23 Python
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android