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 相关文章推荐
永不消失的title提示代码
Feb 15 Javascript
写出更好的JavaScript之undefined篇(上)
Nov 22 Javascript
Jquery Autocomplete 结合asp.net使用要点
Oct 29 Javascript
Jquery时间验证和转换工具小例子
Jul 01 Javascript
js中的replace方法使用介绍
Oct 28 Javascript
jquery easyui 结合jsp简单展现table数据示例
Apr 18 Javascript
深入分析JSON编码格式提交表单数据
Jun 25 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
jqGrid表格底部汇总、合计行footerrow处理
Aug 21 Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 Javascript
javascript函数式编程基础
Sep 15 Javascript
详解jQuery的核心函数和事件处理
Feb 18 jQuery
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
php minixml详解
2008/07/19 PHP
PHP 八种基本的数据类型小结
2011/06/01 PHP
PHP模板解析类实例
2015/07/09 PHP
PHP二维数组矩形转置实例
2016/07/20 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
JQuery插件Style定制化方法的分析与比较
2012/05/03 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
node.js超时timeout详解
2014/11/26 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
JavaScript重载函数实例剖析
2016/05/13 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
easy ui datagrid 从编辑框中获取值的方法
2017/02/22 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
Python异常学习笔记
2015/02/03 Python
Tornado 多进程实现分析详解
2018/01/12 Python
Python实现的爬取百度贴吧图片功能完整示例
2019/05/10 Python
Pytorch to(device)用法
2020/01/08 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
Auchan Direct波兰:欧尚在线杂货店
2016/10/19 全球购物
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
回门宴新郎答谢词
2014/01/12 职场文书
企业演讲比赛主持词
2014/03/18 职场文书
2014年党支部承诺书
2014/05/30 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
Elasticsearch 基本查询和组合查询
2022/04/19 Python