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 YUI 读码日记之 YAHOO.util.Dom - Part.3
Mar 22 Javascript
Javascript 文件夹选择框的两种解决方案
Jul 01 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
三级下拉菜单的js实现代码
May 23 Javascript
js预载入和JavaScript Image()对象使用介绍
Aug 28 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
jQuery实现文本框输入同步的方法
Jun 20 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
Jul 07 Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 Javascript
浅谈vue2 单页面如何设置网页title
Nov 08 Javascript
2019最新21个MySQL高频面试题介绍
Feb 06 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
PHPEXCEL 使用小记
2013/01/06 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
php HTML无刷新提交表单
2016/04/05 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
javascript 鼠标滚轮事件
2009/04/09 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
jQuery前台数据获取实现代码
2011/03/16 Javascript
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
vue实现搜索功能
2019/05/28 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
python计算N天之后日期的方法
2015/03/31 Python
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
python opencv旋转图像(保持图像不被裁减)
2018/07/26 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
selenium+python自动化测试之使用webdriver操作浏览器的方法
2019/01/23 Python
详解【python】str与json类型转换
2019/04/29 Python
详解python中的index函数用法
2019/08/06 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
佳能法国商店:Canon法国
2019/02/14 全球购物
建龙钢铁面试总结
2014/04/15 面试题
专业幼师实习生自我鉴定范文
2013/12/08 职场文书
微型企业创业投资计划书
2014/01/10 职场文书
初中地理教学反思
2014/01/11 职场文书
酒店开业策划方案
2014/06/02 职场文书
技术负责人任命书
2014/06/05 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
党员教师群众路线个人整改措施
2014/10/28 职场文书
2015年高校辅导员工作总结
2015/04/20 职场文书
Mysql 一主多从的部署
2022/05/20 MySQL