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不同页面传值的改进版
Sep 30 Javascript
jQuery 白痴级入门教程
Nov 11 Javascript
jQuery中需要注意的细节问题小结
Dec 06 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
Oct 10 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
Jun 25 Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 Javascript
JavaScript 基础表单验证示例(纯Js实现)
Jul 20 Javascript
详解vue-cli之webpack3构建全面提速优化
Dec 25 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
了解重排与重绘
May 29 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
echarts.js 动态生成多个图表 使用vue封装组件操作
Jul 19 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
PHP 5.0对象模型深度探索之绑定
2006/09/05 PHP
使PHP自定义函数返回多个值
2006/11/26 PHP
php创建桌面快捷方式实现方法
2015/12/31 PHP
Yii控制器中操作视图js的方法
2016/07/04 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
Javascript this关键字使用分析
2008/10/21 Javascript
浅谈Javascript嵌套函数及闭包
2010/11/09 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
2017/03/14 Javascript
Vue2几种常见开局方式详解
2017/09/09 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
Python内置的字符串处理函数详细整理(覆盖日常所用)
2014/08/19 Python
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
Python中Proxypool库的安装与配置
2018/10/19 Python
python线程的几种创建方式详解
2019/08/29 Python
python lambda表达式(匿名函数)写法解析
2019/09/16 Python
python pygame实现球球大作战
2019/11/25 Python
武汉东之林科技有限公司机试
2013/09/17 面试题
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
2014年迎新年活动方案
2014/02/19 职场文书
工伤事故证明
2014/10/20 职场文书
红旗渠导游词
2015/02/09 职场文书
物流业务员岗位职责
2015/04/03 职场文书
企业工会工作总结2015
2015/05/13 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书