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实现图片DIV竖向滑动的方法
Apr 25 Javascript
JS获取当前脚本文件的绝对路径
Mar 02 Javascript
全面解析Bootstrap中transition、affix的使用方法
May 30 Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 Javascript
JavaScript ES6的新特性使用新方法定义Class
Jun 28 Javascript
JS使用正则表达式验证身份证号码
Jun 23 Javascript
vue+node+webpack环境搭建教程
Nov 05 Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
axios对请求各种异常情况处理的封装方法
Sep 25 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 Javascript
Javascript作用域和作用域链原理解析
Mar 03 Javascript
JavaScript实现简单的弹窗效果
May 19 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分页函数
2006/10/09 PHP
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
php更新修改excel中的内容实例代码
2014/02/26 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
Jquery知识点二 jquery下对数组的操作
2011/01/15 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
jquery插件锦集【推荐】
2016/12/16 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
Vue精简版风格概述
2018/01/30 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
vue强制刷新组件的方法示例
2019/02/28 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
python django 访问静态文件出现404或500错误
2017/01/20 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
Python中的self用法详解
2019/08/06 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
windows下python安装pip方法详解
2020/02/10 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
英国标志性奢侈品牌:Burberry
2016/07/28 全球购物
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
商业企业管理专业求职信
2014/07/10 职场文书
倡议书格式及范文
2015/04/29 职场文书
民主生活会意见
2015/06/05 职场文书
关于保护环境的建议书
2019/06/24 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python
Python办公自动化PPT批量转换操作
2021/09/15 Python