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 相关文章推荐
caller和callee的区别介绍及演示结果
Mar 10 Javascript
jQuery拖动图片删除示例
May 10 Javascript
javascript抽象工厂模式详细说明
Dec 16 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
May 30 Javascript
浅谈bootstrap源码分析之tab(选项卡)
Jun 06 Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 Javascript
Jquery树插件zTree实现菜单树
Jan 24 Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 Javascript
BootStrap给table表格的每一行添加一个按钮事件
Sep 07 Javascript
JavaScript利用键盘码控制div移动
Mar 19 Javascript
JavaScript中的各种宽高属性的实现
May 08 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调用Oracle存储过程的方法
2008/09/12 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
AngularJS基础 ng-csp 指令详解
2016/08/01 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
vue脚手架及vue-router基本使用
2018/04/09 Javascript
微信小程序实现发红包功能
2018/07/11 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
2019/04/28 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
微信小程序定义和调用全局变量globalData的实现
2019/11/01 Javascript
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
js实现点击烟花特效
2020/10/14 Javascript
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
使用selenium模拟登录解决滑块验证问题的实现
2019/05/10 Python
Python实现的微信红包提醒功能示例
2019/08/22 Python
opencv实现简单人脸识别
2021/02/19 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
CSS3 选择器 基本选择器介绍
2012/01/21 HTML / CSS
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
日本无添加化妆品:HABA
2016/08/18 全球购物
支教自我鉴定
2014/01/18 职场文书
公司面试感谢信
2014/02/01 职场文书
大学生秋游活动方案
2014/02/17 职场文书
物流专业求职信
2014/06/30 职场文书
竞聘演讲稿开场白
2014/08/25 职场文书
职业规划从高考志愿专业选择开始
2019/08/08 职场文书
七个Python必备的GUI库
2021/04/27 Python
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang
git中cherry-pick命令的使用教程
2022/06/25 Servers
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS