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[js]获取url参数的代码
Oct 17 Javascript
js 多浏览器分别判断代码
Apr 01 Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
AngularJS模板加载用法详解
Nov 04 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
Mar 09 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
JavaScript实现换肤功能
Sep 15 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
Mar 05 Javascript
解决vuecli3.0热更新失效的问题
Sep 19 Javascript
Vue实现微信支付功能遇到的坑
Jun 05 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基于dom实现的图书xml格式数据示例
2017/02/03 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
jQuery中prop()方法用法实例
2015/01/05 Javascript
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
使用Node.js实现RESTful API的示例
2017/08/01 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
Express 配置HTML页面访问的实现
2020/11/01 Javascript
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
PYTHON 中使用 GLOBAL引发的一系列问题
2016/10/12 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
Python图像滤波处理操作示例【基于ImageFilter类】
2019/01/03 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
利用python、tensorflow、opencv、pyqt5实现人脸实时签到系统
2019/09/25 Python
python构建指数平滑预测模型示例
2019/11/21 Python
python用Configobj模块读取配置文件
2020/09/26 Python
基于 HTML5 WebGL 实现的医疗物流系统
2019/10/08 HTML / CSS
使用HTML5加载音频和视频的实现代码
2020/11/30 HTML / CSS
数控专业毕业生求职信范文
2013/09/21 职场文书
护士上岗前培训自我鉴定
2014/04/20 职场文书
师德标兵事迹材料
2014/12/19 职场文书
离职证明格式样本
2015/06/12 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python
如何优化vue打包文件过大
2022/04/13 Vue.js
SQL Server中锁的用法
2022/05/20 SQL Server