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 delete 属性的使用
Oct 08 Javascript
第一个JavaScript入门基础 document.write输出
Feb 22 Javascript
11款新鲜的jQuery插件[附所有demo下载]
Jan 24 Javascript
js如何判断用户是否是用微信浏览器
Jun 05 Javascript
node.js中的fs.existsSync方法使用说明
Dec 17 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
如何用webpack4带你实现一个vue的打包的项目
Jun 20 Javascript
js canvas实现红包照片效果
Aug 21 Javascript
vsCode安装使用教程和插件安装方法
Aug 24 Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 Javascript
微信小程序自定义tabBar在uni-app的适配详解
Sep 30 Javascript
vue实现短信验证码输入框
Apr 17 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学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
Yii调试查看执行SQL语句的方法
2016/07/15 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
脚本安需导入(装载)的三种模式的对比
2007/06/24 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
vue.js图片转Base64上传图片并预览的实现方法
2018/08/02 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
德国最大的网上鞋店之一:Schuhe24.de
2017/06/10 全球购物
法国房车租赁网站:Yescapa
2019/08/26 全球购物
新加坡最早生产电动滑板车的制造商之一:FunsToTheFore
2020/09/08 全球购物
商场拾金不昧表扬信
2014/01/13 职场文书
高中考试作弊检讨书
2014/01/14 职场文书
九年级科学教学反思
2014/01/29 职场文书
基层党员对照检查材料
2014/08/25 职场文书
护理医院见习报告
2014/11/03 职场文书
三好学生个人总结
2015/02/15 职场文书
2016春节慰问信范文
2015/03/25 职场文书
公司总经理岗位职责
2015/04/01 职场文书
教师节主持词开场白
2015/05/29 职场文书
预备党员入党感言
2015/08/01 职场文书