js左侧多级菜单动态的解决方案


Posted in Javascript onFebruary 01, 2010
<div><a onclick="news_pro('1.1')">1</a></div> 
<div id="1.1" > 
<div> <a onclick="news_pro('1.1.1')">1.1</a></div> 
</div>

这就出现两次类别了,点父级显示(隐藏)子级菜单,JS代码也就一句话:
function news_pro(o) 
{ 
var obj=document.getElementById(o) 
obj.style.display==""? obj.style.display="none": obj.style.display=""; 
}

是不是有点太简单了,没错,就是这么简单,不过还没完,我们继续往下看;接着添加三级和四级子菜单:
<div><a onclick="news_pro('1.1')">1</a></div> 
<div id="1.1"> 
<div> <a onclick="news_pro('1.1.1')">1.1</a></div> 
<div id="1.1.1" > 
<div><A onclick="news_pro('1.1.1.1')">1.1.1</a></div> 
<div id="1.1.1.1"> 
<div>
 1.1.1.1</div> 
<div>
 1.1.1.2</div> 
</div> 
<div>
1.1.2</div> 
</div> 
<div> 1.2</div> 
<div> 1.3</div> 
</div>

js代码还是只有那一行,so easy吧,可是真的就这样完了吗?答案是NONONO!当你点其中的一级时,页面发生跳转,这是我们想要的,但是左边的菜单却又变成了原来的样子,并没有保存我刚才点击的状态,那该怎么办呢?因为同事是要用到ASP里去,好像没有视图状态这个东东,那用session保存吗?好像能行得通,但是如果你点击快一点,就发现菜单有时候点几次都会不同,根本反应不过来或是session丢失了,最后不巧我发现我的命名很有意思,一级是1,二级是1.1三级是1.1.1,四级是1.1.1.1,想到什么?想到了数据库设计多级类别的查询吧!?好像discuz里面的类别就是这么设计的。它查询也很快,那我也给它来个快速的,灵机一动,就so happy了。

代码如下,采用url传值的方式:

<div><a onclick="news_pro('1.1')" href="?id=1.1">1</a></div> 
<div id="1.1" <%If InStr(request.querystring("id"),"1.1")=0 Then response.write style='display:none;'%>> 
<div> <a onclick="news_pro('1.1.1')" href="?id=1.1.1">1.1</a></div> 
<div id="1.1.1" style="display:none;" <%If InStr(request.querystring("id"),"1.1.1")=0 Then response.write style='display:none;'%>> 
<div><A onclick="news_pro('1.1.1.1')" href="?id=1.1.1.1">1.1.1</a></div> 
<div id="1.1.1.1" <%If InStr(request.querystring("id"),"1.1.1.1")=0 Then response.write style='display:none;'%>> 
<div>
 1.1.1.1</div> 
<div>
 1.1.1.2</div> 
</div> 
<div>
1.1.2</div> 
</div> 
<div> 1.2</div> 
<div> 1.3</div> 
</div> 
<div><a >2</a></div> 
<div><a >3</a></div>

我相信这个代码不管理asp或是asp.net都区别不大,其实用纯js也可以做到,不过既然是用在asp里的,干嘛要多写js呢?好了,功能实现了。大家都OK了,如果你有不同的方法,欢迎贴出来大家一起分享。从学习中进步。。。
Javascript 相关文章推荐
JavaScript随机排序(随即出牌)
Sep 17 Javascript
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
原生js结合html5制作小飞龙的简易跳球
Mar 30 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
May 09 Javascript
JavaScript实现两个select下拉框选项左移右移
Mar 09 Javascript
vue2.0父子组件间通信的实现方法
Apr 19 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
Aug 17 Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 Javascript
实例详解Node.js 函数
Jun 10 Javascript
vue-cli4使用全局less文件中的变量配置操作
Oct 21 Javascript
javascript 三种编解码方式
Feb 01 #Javascript
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 #Javascript
javaScript 关闭浏览器 (不弹出提示框)
Jan 31 #Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
Jan 31 #Javascript
详细讲解JS节点知识
Jan 31 #Javascript
javascript中的array数组使用技巧
Jan 31 #Javascript
jquery 批量上传图片实现代码
Jan 28 #Javascript
You might like
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
用PHP和ACCESS写聊天室(九)
2006/10/09 PHP
php入门教程 精简版
2009/12/13 PHP
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
PHP实现自动识别Restful API的返回内容类型
2015/02/07 PHP
PHP使用观察者模式处理异常信息的方法详解
2019/09/24 PHP
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
JS与C#编码解码
2013/12/03 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
2015/11/24 Javascript
jQuery实现本地预览上传图片功能
2016/01/08 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
jQuery窗口拖动功能的实现代码
2017/02/04 Javascript
ionic3 懒加载
2017/08/16 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
2017/11/03 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
浅析Python函数式编程
2018/10/06 Python
python正则表达式匹配[]中间为任意字符的实例
2018/12/25 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
pyinstaller打包单文件时--uac-admin选项不起作用怎么办
2020/04/15 Python
Python通过fnmatch模块实现文件名匹配
2020/09/30 Python
python IP地址转整数
2020/11/20 Python
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
社会保险接收函
2014/01/12 职场文书
家庭教育先进个人事迹材料
2014/01/24 职场文书
上班上网检讨书
2014/01/29 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
综合测评自我评价
2015/03/06 职场文书
幼儿园开学通知
2015/04/24 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书
python 中yaml文件用法大全
2021/07/04 Python