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 相关文章推荐
JS中window.open全屏命令解析及使用示例
Dec 11 Javascript
14个有用的Jquery技巧分享
Jan 08 Javascript
浅析BootStrap栅格系统
Jun 07 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
Jun 17 Javascript
Web前端框架Angular4.0.0 正式版发布
Mar 28 Javascript
Vue.js如何实现路由懒加载浅析
Aug 14 Javascript
微信小程序实现人脸检测功能
May 25 Javascript
微信小程序滑动选择器的实现代码
Aug 10 Javascript
从理论角度讨论JavaScript闭包
Apr 03 Javascript
基于JS开发微信网页录音功能的实例代码
Apr 30 Javascript
vue项目中将element-ui table表格写成组件的实现代码
Jun 12 Javascript
Openlayers绘制地图标注
Sep 28 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
模仿OSO的论坛(一)
2006/10/09 PHP
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
PHP获取windows登录用户名的方法
2014/06/24 PHP
php CI框架插入一条或多条sql记录示例
2014/07/29 PHP
PHP针对伪静态的注入总结【附asp与Python相关代码】
2017/08/01 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
JavaScript的public、private和privileged模式
2009/12/28 Javascript
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
浅谈Node.js中的定时器
2015/06/18 Javascript
jQuery实现点击行选中或取消CheckBox的方法
2016/08/01 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
监听element-ui table滚动事件的方法
2019/03/26 Javascript
vue+animation实现翻页动画
2020/06/29 Javascript
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
轻松理解Python 中的 descriptor
2017/09/15 Python
python实现简易版计算器
2020/06/22 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
python实现移位加密和解密
2019/03/22 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
python IDLE添加行号显示教程
2020/04/25 Python
python链表类中获取元素实例方法
2021/02/23 Python
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
草莓网化妆品日本站:Strawberrynet日本
2017/10/20 全球购物
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
函数指针的定义是什么
2016/08/14 面试题
高职教师岗位职责
2013/12/24 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
微信小程序结合ThinkPHP5授权登陆后获取手机号
2021/11/23 PHP
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL