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 相关文章推荐
js如何取消事件冒泡
Sep 23 Javascript
JS求平均值的小例子
Nov 29 Javascript
javascript中call,apply,bind的用法对比分析
Feb 12 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
Aug 05 Javascript
多种方式实现js图片预览
Dec 12 Javascript
浅述节点的创建及常见功能的实现
Dec 15 Javascript
H5上传本地图片并预览功能
May 08 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
Element-ui table中过滤条件变更表格内容的方法
Mar 02 Javascript
vue中el-upload上传图片到七牛的示例代码
Oct 19 Javascript
vue+springboot图片上传和显示的示例代码
Feb 14 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四大安全策略
2014/03/12 PHP
PHP使用CURL模拟登录的方法
2015/07/08 PHP
PHP扩展迁移为PHP7扩展兼容性问题记录
2016/02/15 PHP
PHP微信支付实例解析
2016/07/22 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
DOM操作一些常用的属性汇总
2015/03/13 Javascript
盘点javascript 正则表达式中 中括号的【坑】
2016/03/16 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
JavaScript中条件语句的优化技巧总结
2020/12/04 Javascript
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
Python中DJANGO简单测试实例
2015/05/11 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
Python流程控制 while循环实现解析
2019/09/02 Python
Python序列类型的打包和解包实例
2019/12/21 Python
python发qq消息轰炸虐狗好友思路详解(完整代码)
2020/02/15 Python
python实现三壶谜题的示例详解
2020/11/02 Python
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
软件测试常见笔试题
2012/02/04 面试题
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
新郎婚宴答谢词
2014/01/19 职场文书
社区护士演讲稿
2014/08/27 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
2016清明节森林防火广播稿
2015/12/17 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
redis客户端实现高可用读写分离的方式详解
2021/07/04 Redis
Android实现图片九宫格
2022/06/28 Java/Android