js 单击式的下拉菜单效果实例


Posted in Javascript onAugust 13, 2013
<!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=gb2312" /> 
<title>js 单击式的下拉菜单效果</title> 
<style> 
.div1 { width: 120px; height: 20px; line-height:20px; text-align:center; } 
.div2 {width: 120px; position:absolute; left:0; top:10px;visibility:hidden; } 
.div2 a{ display:block;} 
</style> 
</head> 
<body> 
<script language="JavaScript"> 
var zindex=100 
function dropit2(whichone){ 
if (window.themenu&&themenu.id!=whichone.id) 
themenu.style.visibility="hidden" 
themenu=whichone 
if (document.all){ 
themenu.style.left=document.body.scrollLeft+event.clientX-event.offsetX 
themenu.style.top=document.body.scrollTop+event.clientY-event.offsetY+18 
if (themenu.style.visibility=="hidden"){ 
themenu.style.visibility="visible" 
themenu.style.zIndex=zindex++} 
else{ 
hidemenu()}}} 
function dropit(e,whichone){ 
if (window.themenu&&themenu.id!=eval(whichone).id) 
themenu.visibility="hide" 
themenu=eval(whichone) 
if (themenu.visibility=="hide") 
themenu.visibility="show" 
else 
themenu.visibility="hide" 
themenu.zIndex++ 
themenu.left=e.pageX-e.layerX 
themenu.top=e.pageY-e.layerY+19 
return false} 
function hidemenu(whichone){ 
if (window.themenu) 
themenu.style.visibility="hidden"} 
function hidemenu2(){ 
themenu.visibility="hide"} 
if (document.all) 
document.onclick=hidemenu 
</script> 
<span class="div1" onClick="dropit2(dropmenu);event.cancelBubble=true;return false"> <a href="###" onClick="if(document.layers) return dropit(event, 'document.dropmenu')">[点击显示菜单]</a> </span> 
<div class="div2" id="dropmenu"> 
<a href="https://3water.com">三水点靠木</a> 
<a href="#">个性名字网</a> 
<a href="#">个性名字网</a> 
</div> 
</body> 
</html> </td>
   </tr>
 </table>
Javascript 相关文章推荐
Javascript 自定义类型方法小结
Mar 02 Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
EasyUi datagrid 实现表格分页
Feb 10 Javascript
jQuery实现切换字体大小的方法
Mar 10 Javascript
jQuery入门之层次选择器实例简析
Dec 11 Javascript
JS前端加密算法示例
Dec 22 Javascript
js is_valid_filename验证文件名的函数
Jul 19 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
May 17 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
Sep 18 Javascript
使用Node.js写一个代码生成器的方法步骤
May 10 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 Javascript
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
让元素在网页中可拖动示例代码
Aug 13 #Javascript
IE、FF、Chrome浏览器中的JS差异介绍
Aug 13 #Javascript
JavaScript的Module模式编程深入分析
Aug 13 #Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
Aug 13 #Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 #Javascript
js setTimeout 参数传递使用介绍
Aug 13 #Javascript
js setTimeout 常见问题小结
Aug 13 #Javascript
You might like
TMDPHP 模板引擎使用教程
2012/03/13 PHP
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
php结合js实现点击超链接执行删除确认操作
2014/10/31 PHP
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
jQuery each()小议
2010/03/18 Javascript
EasyUI中的tree用法介绍
2011/11/01 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
2013/07/17 Javascript
JS性能优化笔记搜索整理
2013/08/21 Javascript
推荐6款基于jQuery实现图片效果插件
2014/12/07 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
python打开网页和暂停实例
2014/09/30 Python
python正则实现提取电话功能
2018/02/24 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
Python数据类型之List列表实例详解
2019/05/08 Python
python实现列表的排序方法分享
2019/07/01 Python
wxPython绘图模块wxPyPlot实现数据可视化
2019/11/19 Python
使用Python画出小人发射爱心的代码
2019/11/23 Python
python定义类self用法实例解析
2020/01/22 Python
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2020/12/10 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
西雅图电动自行车公司:Rad Power Bikes
2020/02/02 全球购物
金融专业应届生求职信
2013/11/02 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
Python面向对象之内置函数相关知识总结
2021/06/24 Python
mysql查询结果实现多列拼接查询
2022/04/03 MySQL