A JavaScript Fancier
伟大的javascript技术研究中...
IT博客
::
首页
::
新随笔
::
联系
::
聚合
::
管理
::
304 随笔 :: 0 文章 :: 479 评论 :: 0 Trackbacks
<
2007年1月
>
日
一
二
三
四
五
六
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
公告
本blog为作者本人学习JS脚本所用,未经特别声明,本站所有文章均属作者本人原创,请转载时注明来源!谢谢合作!同时希望与各位javascript爱好者交流学习。MSN:yanwei8410@hotmail.com
常用链接
我的随笔
我的评论
我参与的随笔
留言簿
(26)
给我留言
查看公开留言
查看私人留言
随笔分类
__非技术文章__(24)
(rss)
DHTML相关技术(2)
(rss)
HTML/XHTML/CSS(37)
(rss)
javascript个人作品(37)
(rss)
javascript代码收藏(22)
(rss)
javascript代码研究(18)
(rss)
javascript技巧总结(72)
(rss)
javascript语法基础(20)
(rss)
Js框架组件(33)
(rss)
Web2.0相关内容(11)
(rss)
Web开发相关知识(28)
(rss)
其它技术文章(3)
(rss)
动态网页编程技术(4)
(rss)
正则表达式专题(10)
(rss)
随笔档案
2008年7月 (7)
2008年6月 (14)
2008年5月 (15)
2008年4月 (4)
2008年3月 (5)
2008年1月 (7)
2007年12月 (10)
2007年11月 (22)
2007年10月 (27)
2007年9月 (16)
2007年8月 (1)
2007年7月 (8)
2007年6月 (5)
2007年5月 (12)
2007年4月 (16)
2007年3月 (3)
2007年2月 (5)
2007年1月 (22)
2006年12月 (11)
2006年11月 (4)
2006年10月 (2)
2006年9月 (6)
2006年8月 (4)
2006年7月 (17)
2006年6月 (61)
Ajax技术站点
AJAX Matters
Ajaxian(国外)
AjaxPatterns Wiki
AJAX中国
Ajax中国-李琨老师的blog
笑笑设计(Ajax高人Blog)
javascript学习站点
javascript论坛
JSVM官方站点
无忧脚本
正则表达式库
JS高人Blog
LlinZzi's Blog
宝玉的blog
西林@生存
Ruby&&Ajax框架
Ajax效果框架
Bindows官方站
JSLinb(Ajax框架)
RubyonRail
rubyonrails
Ruby官方站
类C++的js框架
Web技术站点
CoolCode.CN
HTML5时代
专注于html5/css3及mobile开发的博客
IECN社区
Ugia.Cn
WEB2.0技术博客
(rss)
Web服务_TechTarget
蓝色理想
搜索
积分与排名
积分 - 877865
排名 - 2
最新评论
1. re: 利用arguments.callee实现匿名函数的递归
http://uedbet-getafe.weebly.com
--匿名函数
2. re: 解决Ext2.0中ComboBox执行Filter第一次无效的问题
评论内容较长,点击标题查看
--学习着
3. re: 有关window.undefined=window.undefined写法的理解(Ext2学习总结)
1
--1
4. re: EXT Ajax访问url返回405错误的解决办法
果然是requestMethod:'GET' 的问题。哈哈
--倔强的土豆
5. re: CSS中table-layout属性的作用及使用详解
vnbg
--左支座
阅读排行榜
1. document.getElementById()方法简写【js技巧】(58673)
2. 推荐一个IE下的优秀js调试工具(Companion.JS)(42443)
3. 关于JavaScript中apply与call的用法意义及区别(41826)
4. 转换字符串为json对象的方法 (19255)
5. JS中的instanceof和typeof (19105)
评论排行榜
1. XHTML1.0学习总结(30)
2. 关于JavaScript中apply与call的用法意义及区别(28)
3. [推荐]收藏的国内外网站设计资源【摘自http://adobeplus.blog.sohu.com】(26)
4. 一个正则实现文本框中只能输入数字和小数点(20)
5. Mastering JavaScript — concept and resource guide(20)
花了两个小时才完成的qq菜单效果--失败啊。。
这么一个简单的效果就花了偶两个多小时,失败。。。
看来还是写的太少,眼高手低!!
以后还要多动手写,不能只知道实现方法就pass了
废话少说,代码如下(这个可是结构,样式,行为相分离哦):
<!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> <title> new document </title> <meta name="generator" content="editplus" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> *{margin:0px;padding:0px;} #menu{ font-size:12px; list-style-type:none; width:100px;text-align:center; } #m1,#m2,#m3,#m4{ border:1px solid #666; height:20px;line-height:20px; background:#ccc;width:98px; } #m1_sub,#m2_sub,#m3_sub,#m4_sub{ display:inline-block; } ul#menu li ul li{ border:1px solid #999; height:20px;line-height:20px; background:#efefef;list-style-type:none; } </style> <script type="text/javascript"> function toggleMenu(){ var aTitle=new Array(); if(arguments.length==0) return false; //获取对象 var $=function(id){ return document.getElementById?document.getElementById(id):document.all[id]; } //将获取参数转换为数组 for(var i=0;i<arguments.length;i++){ aTitle[aTitle.length]=arguments[i]; } for(var i=0;i<aTitle.length;i++){ $(aTitle[i]+"_sub").style.display="none"; //初始化为所有菜单隐藏 //添加事件 $(aTitle[i]).onclick=function(){ toggleIt(); //主处理函数 } } var toggleIt=function(){ var evt=window.event||toggleIt.caller.arguments[0]; var evtElm=evt.srcElement||evt.target; for(var i=0;i<aTitle.length;i++){ if(evtElm&&evtElm.id!=aTitle[i]){ $(aTitle[i]+"_sub").style.display="none"; }else{ //点击对象如果就是当前遍历对象 $(aTitle[i]+"_sub").style.display=($(aTitle[i]+"_sub").style.display=="none"?"":"none"); } } } } window.onload=function(){ //调用方法,在参数中逐个加入主标题id,注意,对应内容必须为“主标题id+"_sub"” toggleMenu("m1","m2","m3","m4"); } </script> </head> <body> <ul id="menu"> <li id="m1">菜单1</li> <li id="m1_sub"> <ul> <li>11111111111</li> <li>11111111111</li> </ul> </li> <li id="m2">菜单2</li> <li id="m2_sub"> <ul> <li>22222222222</li> <li>22222222222</li> </ul> </li> <li id="m3">菜单3</li> <li id="m3_sub"> <ul> <li>33333333333</li> <li>33333333333</li> </ul> </li> <li id="m4">菜单4</li> <li id="m4_sub"> <ul> <li>44444444444</li> <li>44444444444</li> </ul> </li> </ul> </body> </html>
(
提示:运行看不到效果请刷新一下
)
posted on 2007-01-24 16:18
Yemoo'S JS Blog
阅读(3358)
评论(4)
编辑
收藏
引用
所属分类:
javascript个人作品
评论
#
re: 花了两个小时才完成的qq菜单效果--失败啊。。
2007-01-26 23:13
Flash动画
nan
回复
更多评论
#
re: 花了两个小时才完成的qq菜单效果--失败啊。。
2007-02-03 14:09
bb
火狐....:(
回复
更多评论
#
re: 花了两个小时才完成的qq菜单效果--失败啊。。
2007-02-03 14:36
Yemoo'S JS Blog
@bb
谢谢朋友的提醒,已经修改好了,但是打开页面需要刷新一下。
回复
更多评论
#
re: 花了两个小时才完成的qq菜单效果--失败啊。。
2010-03-31 17:53
jordan shoes
另外我还有一个问题 对于一个情况 123456798 你的估价函数算出来的是 2 , 但是实际的是1 , 就是直接的把8 和9 交换, 这是为什么呢,
回复
更多评论
刷新评论列表
只有注册用户
登录
后才能发表评论。
Powered by:
IT博客
Copyright © Yemoo'S JS Blog