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 相关文章推荐
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
jQuery多级弹出菜单插件ZoneMenu
Dec 18 Javascript
JS实现窗口加载时模拟鼠标移动的方法
Jun 03 Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 Javascript
JS实现Fisheye效果动感放大菜单代码
Oct 21 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
使用jQuery给input标签设置默认值
Jun 20 Javascript
VC调用javascript的几种方法(推荐)
Aug 09 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 Javascript
示例vue 的keep-alive缓存功能的实现
Dec 13 Javascript
JavaScript中的this妙用实例分析
May 09 Javascript
JS原生实现轮播图的几种方法
Mar 23 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实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
PHP5中使用mysqli的prepare操作数据库的介绍
2019/03/18 PHP
JavaScript入门之基本函数详解
2011/10/21 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
2016/05/28 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
vue+webpack实现异步加载三种用法示例详解
2018/04/24 Javascript
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
java和js实现的洗牌小程序
2019/09/30 Javascript
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
uniapp实现横向滚动选择日期
2020/10/21 Javascript
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
Python 2.7中文显示与处理方法
2018/07/16 Python
Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】
2018/12/11 Python
python的re模块使用方法详解
2019/07/26 Python
python elasticsearch环境搭建详解
2019/09/02 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
python 实现逻辑回归
2020/12/30 Python
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
2015年个人现实表现材料
2014/12/10 职场文书
接待员岗位职责范本
2015/04/15 职场文书
法律意见书范文
2015/06/04 职场文书
关于幸福的感言
2015/08/03 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书
javascript函数式编程基础
2021/09/15 Javascript
MySQL创建管理KEY分区
2022/04/13 MySQL