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 相关文章推荐
window.js 主要包含了页面的一些操作
Dec 23 Javascript
该如何加载google-analytics(或其他第三方)的JS
May 13 Javascript
window.location.href中url中数据量太大时的解决方法
Dec 23 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 Javascript
20个实用的JavaScript技巧分享
Nov 28 Javascript
js实现从中间开始往上下展开网页窗口的方法
Mar 02 Javascript
javascript文本模板用法实例
Jul 31 Javascript
深入解析JavaScript中的立即执行函数
May 21 Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
详解react关于事件绑定this的四种方式
Mar 09 Javascript
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
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 array_intersect比array_diff快(附详细的使用说明)
2011/07/03 PHP
PHP+MYSQL中文乱码问题
2015/07/01 PHP
PHP中串行化用法示例
2016/11/16 PHP
js同时按下两个方向键
2007/12/01 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
详细讲解JS节点知识
2010/01/31 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
2016/09/05 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
原生JS仿QQ阅读点击展开、收起效果
2017/03/08 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
jQuery实现动态向上滚动
2020/12/21 jQuery
Python找出最小的K个数实例代码
2018/01/04 Python
python 以16进制打印输出的方法
2018/07/09 Python
python实现websocket的客户端压力测试
2019/06/25 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
数控技术专业推荐信
2013/11/01 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
村居抓节水倡议书
2014/05/19 职场文书
博士生求职信
2014/07/06 职场文书
12.4全国法制宣传日活动总结
2014/11/01 职场文书
个人收入证明范本
2015/06/12 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS