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 相关文章推荐
用htc组件制作windows选项卡
Jan 13 Javascript
jsTree树控件(基于jQuery, 超强悍)[推荐]
Sep 01 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
javascript实现倒计时(精确到秒)
Jun 26 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
Jan 26 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 Javascript
微信小程序 scroll-view实现锚点滑动的示例
Dec 06 Javascript
JS集合set类的实现与使用方法示例
Feb 01 Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 Javascript
关于JS中的作用域中的问题思考分享
Apr 06 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
基于php 随机数的深入理解
2013/06/05 PHP
解析php file_exists无效的解决办法
2013/06/26 PHP
PHP实现变色验证码实例
2014/01/06 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
Knockoutjs快速入门(经典)
2012/12/24 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
Python验证文件是否可读写代码分享
2017/12/11 Python
详解tensorflow实现迁移学习实例
2018/02/10 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
python实现向微信用户发送每日一句 python实现微信聊天机器人
2019/03/27 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
matplotlib教程——强大的python作图工具库
2020/10/15 Python
Jo Malone美国官网:祖玛珑香水
2017/03/27 全球购物
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
华为慧通面试题
2012/09/11 面试题
大学生如何写自荐信
2014/01/08 职场文书
商务邀请函范文
2014/01/14 职场文书
审计主管岗位职责
2014/01/31 职场文书
研修第一天随笔感言
2014/02/15 职场文书
小学运动会前导词
2015/07/20 职场文书
企业财务管理制度范本
2015/08/04 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python
Redis三种集群模式详解
2021/10/05 Redis
Python Flask实现进度条
2022/05/11 Python