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

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

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

运行效果截图如下：

在线演示地址如下：

http://演示。jb51。net/js/2015/js-点击-显示-下拉菜单-样式-代码/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title下拉菜单/title style type=' text/CSS ' * { margin :0；padd :0 } # nav { width :200 px；margin :50 px } # nav H3 {光标：指针；线高：30 px高度：30 px背景-颜色： # 000000；color : # fff } # nav a { display :块；线高：24 px颜色： # 66666 } # nav a :悬停{背景色： # eeecolor : # 000 } # nav div { display : none border :1 px固体# 000;border-top : none }/style脚本类型=' text/JavaScript ' function $(id){ return document。getelementbyid(id)}窗口。onload=function(){ $(' nav ').onclick=function(e){ var src=e？目标：事件。加速；if(src。标记名==' H3 '){ var next=src。next elementsibling | | src。下一个兄弟姐妹；下一个。风格。显示=(下一个。风格。display==' block ')？" none ' : ' block } } }/script/head dydiv id=' nav ' H3管理区/h3 div a href='# '建议/a a href='# '链接/a a href='# '联系/a /div h3交流区/H3 div a href=' # ' JavaScript/a href=' # ' Delphi/a href=' # ' VC/a/div/div/body/html希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。