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 类方法定义还是有点区别
Apr 15 Javascript
JavaScript 三种不同位置代码的写法
Oct 25 Javascript
分享27个jQuery 表单插件集合推荐
Apr 25 Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 Javascript
JS运动框架之分享侧边栏动画实例
Mar 03 Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
学习JavaScript设计模式(代理模式)
Dec 03 Javascript
浅谈js基本数据类型和typeof
Aug 09 Javascript
jQuery焦点图轮播效果实现方法
Dec 19 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
JS面向对象的程序设计相关知识小结
May 26 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
May 09 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
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
php获取excel文件数据
2017/04/21 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
2016/02/16 Javascript
编写高质量JavaScript代码的基本要点
2016/03/02 Javascript
微信小程序 标签传入数据
2017/05/08 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
2020/08/08 Javascript
Node.js web 应用如何封装到Docker容器中
2020/09/01 Javascript
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
python实现ping的方法
2015/07/06 Python
使用Python脚本实现批量网站存活检测遇到问题及解决方法
2016/10/11 Python
Python操作Sql Server 2008数据库的方法详解
2018/05/17 Python
django从后台返回html代码的实例
2020/03/11 Python
HTML5 Geolocation API的正确使用方法
2018/12/04 HTML / CSS
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
新闻专业本科生的自我评价分享
2013/11/20 职场文书
怎样写好创业计划书的内容
2014/02/06 职场文书
参赛口号
2014/06/16 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
活动经费申请报告
2015/05/15 职场文书
教师工作证明范本
2015/06/12 职场文书
在职证明范本
2015/06/15 职场文书
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL